Unverified breakpoint debugging vue.js webpack app

Description

I followed this guide to setup debugging. However the breakpoints are not working.
this is my launch.json file

...
{
     "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "name": "Launch Vue App",
      "url": "http://localhost:8080/",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [
        { "url": "webpack:///src/*", "path": "${webRoot}/*" }
      ]
}
...

and my config/index.js

module.exports = {
  dev: {
    ...
    devtool: 'source-map',
    ...

Specifications

• vue-cli: 2.9
• firefox: 61.0.1 (Ubuntu edition)

[Michael-Liao]

thanks for the help, didn’t know that some of the webpack source maps where broken. The following is a working example: lauch.json

"version": "0.2.0",
  "configurations": [
    {
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "name": "Launch Vue App",
      "firefoxExecutable": "/home/michael/firefox-dev/firefox",
      "url": "http://localhost:8080/",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [
        {
          "url": "webpack:///src/",
          "path": "${webRoot}"
        }
      ],
      "skipFiles": [ // optional
        "${workspaceFolder}/node_modules/**"
      ]
    }
  ]

config/index.js shouldn’t be modified. While breakpoints work now, it still reacts weird in single file components.

[hbenl]

Your pathMappings are incorrect, this debug adapter doesn’t use the same syntax as the Chrome debug adapter: remove the * at the end of url and path. In general, the most reliable way of creating pathMappings is through the “Map to local directory” context menu entry in the Loaded Scripts Explorer.

devtool: 'source-map'

I’m not sure what this means, but if this is the configuration of the webpack devtool (that’s what it looks like), you should try switching to a different option because some webpack devtool options are broken, see webpack/webpack#5491.