Vue.js debugging in Chrome and VS Code isn't working

[EricG-Personal]

I attempted to follow the instructions at

https://github.com/Microsoft/vscode-recipes/blob/master/vuejs-cli/README.md

but could not get them to work as expected. After running, the debugger does stop, but it stops on line 1058 in app.js and not on line 90 in HelloWorld.vue ( return { ).

I should be using the latest released versions of the various products involved.

npm --version
6.7.0

vue --version
2.9.6

VS Code
Version 1.32.1 (1.32.1)

Chrome
Version 72.0.3626.121 (Official Build) (64-bit)

Chrome Extension Vue.js devtools
4.1.5 beta

VS Code Extension Debugger for Chrome
4.11.3

[AlissonRS]

I had a similar problem. Followed the recipe, then I set the breakpoint, but when I start debugging the breakpoint suddenly slides some lines below.

This Stack Overflow answer is what worked for me.

[EricG-Personal]

@AlissonRS What part of the answer worked for you? What exactly did you do?

[AlissonRS]

@EricG-Personal specifically sourceMapPathOverrides, at least is what is different between the launch.config files.

[EricG-Personal]

@AlissonRS Thank you.

While using the sourceMapPathOverrides from the StackOverflow answer you provided allows the breakpoint on line 90 to work, there is still an issue with the overrides as can be seen when using the .scripts command to see where the source maps are pointing for particular files. In the case of HelloWorld.vue, there is a double reference to /src/ which is clearly wrong. However, it is apparently the first reference to HelloWorld that is involved in the breakpoint and that is why the breakpoint works. However, I am guessing that at some other time, something else may go wrong.

    - webpack:///src/components/HelloWorld.vue (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/components/HelloWorld.vue)
    - webpack:///./src/components/HelloWorld.vue?fc77 (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/src/components/HelloWorld.vue)
    - webpack:///./src/components/HelloWorld.vue?f2ab (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/src/components/HelloWorld.vue)
    - webpack:///./src/components/HelloWorld.vue (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/src/components/HelloWorld.vue)
    - webpack:///./src/components/HelloWorld.vue?e25d (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/src/components/HelloWorld.vue)

The sourceMapPathOverrides that fix the issues with HelloWorld.vue are:

    "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
    }

The paths shown below by .scripts now look ok. I would like to know if:

1. the relative paths to 'node_modules' (ex. node_modules/url/url.js) are ok.

2. are the paths which contain (webpack)-dev-server and (webpack) treated specially? Are they correct? (ex: (webpack)-dev-server/client/index.js and (webpack)/hot/log.js)

So, this is a bug in the tutorial and the sourceMapPathOverrides should be updated.

› VM21
› VM22
› http://localhost:8080/app.js
    - webpack:///webpack/bootstrap 8d94e0675829e74a6243 (webpack/bootstrap 8d94e0675829e74a6243)
    - webpack:///./node_modules/ansi-html/index.js (node_modules/ansi-html/index.js)
    - webpack:///./node_modules/ansi-regex/index.js (node_modules/ansi-regex/index.js)
    - webpack:///./src/App.vue?cefc (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/App.vue)
    - webpack:///./src/App.vue?edc5 (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/App.vue)
    - webpack:///./src/App.vue?569e (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/App.vue)
    - webpack:///./src/App.vue (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/App.vue)
    - webpack:///src/App.vue (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/App.vue)
    - webpack:///src/components/HelloWorld.vue (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/components/HelloWorld.vue)
    - webpack:///./src/components/HelloWorld.vue?e25d (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/components/HelloWorld.vue)
    - webpack:///./src/components/HelloWorld.vue?fc77 (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/components/HelloWorld.vue)
    - webpack:///./src/components/HelloWorld.vue (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/components/HelloWorld.vue)
    - webpack:///./src/components/HelloWorld.vue?f2ab (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/components/HelloWorld.vue)
    - webpack:///./node_modules/css-loader/lib/css-base.js (node_modules/css-loader/lib/css-base.js)
    - webpack:///./node_modules/events/events.js (node_modules/events/events.js)
    - webpack:///./node_modules/html-entities/index.js (node_modules/html-entities/index.js)
    - webpack:///./node_modules/html-entities/lib/html4-entities.js (node_modules/html-entities/lib/html4-entities.js)
    - webpack:///./node_modules/html-entities/lib/html5-entities.js (node_modules/html-entities/lib/html5-entities.js)
    - webpack:///./node_modules/html-entities/lib/xml-entities.js (node_modules/html-entities/lib/xml-entities.js)
    - webpack:///./node_modules/loglevel/lib/loglevel.js (node_modules/loglevel/lib/loglevel.js)
    - webpack:///./node_modules/node-libs-browser/node_modules/punycode/punycode.js (node_modules/node-libs-browser/node_modules/punycode/punycode.js)
    - webpack:///./node_modules/querystring-es3/decode.js (node_modules/querystring-es3/decode.js)
    - webpack:///./node_modules/querystring-es3/encode.js (node_modules/querystring-es3/encode.js)
    - webpack:///./node_modules/querystring-es3/index.js (node_modules/querystring-es3/index.js)
    - webpack:///./node_modules/sockjs-client/dist/sockjs.js (node_modules/sockjs-client/dist/sockjs.js)
    - webpack:///./node_modules/strip-ansi/index.js (node_modules/strip-ansi/index.js)
    - webpack:///./node_modules/url/url.js (node_modules/url/url.js)
    - webpack:///./node_modules/url/util.js (node_modules/url/util.js)
    - webpack:///./node_modules/vue-hot-reload-api/dist/index.js (node_modules/vue-hot-reload-api/dist/index.js)
    - webpack:///./node_modules/vue-loader/lib/component-normalizer.js (node_modules/vue-loader/lib/component-normalizer.js)
    - webpack:///./node_modules/vue-router/dist/vue-router.esm.js (node_modules/vue-router/dist/vue-router.esm.js)
    - webpack:///./node_modules/vue-style-loader/lib/addStylesClient.js (node_modules/vue-style-loader/lib/addStylesClient.js)
    - webpack:///./node_modules/vue-style-loader/lib/listToStyles.js (node_modules/vue-style-loader/lib/listToStyles.js)
    - webpack:///./node_modules/vue/dist/vue.esm.js (node_modules/vue/dist/vue.esm.js)
    - webpack:///(webpack)-dev-server/client/index.js ((webpack)-dev-server/client/index.js)
    - webpack:///(webpack)-dev-server/client/overlay.js ((webpack)-dev-server/client/overlay.js)
    - webpack:///(webpack)-dev-server/client/socket.js ((webpack)-dev-server/client/socket.js)
    - webpack:///(webpack)/buildin/global.js ((webpack)/buildin/global.js)
    - webpack:///(webpack)/buildin/module.js ((webpack)/buildin/module.js)
    - webpack:///(webpack)/hot nonrecursive ^\.\/log$ ((webpack)/hot nonrecursive ^/log$)
    - webpack:///(webpack)/hot/dev-server.js ((webpack)/hot/dev-server.js)
    - webpack:///(webpack)/hot/emitter.js ((webpack)/hot/emitter.js)
    - webpack:///(webpack)/hot/log-apply-result.js ((webpack)/hot/log-apply-result.js)
    - webpack:///(webpack)/hot/log.js ((webpack)/hot/log.js)
    - webpack:///./src/assets/logo.png (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/assets/logo.png)
    - webpack:///./src/main.js (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/main.js)
    - webpack:///./src/router/index.js (/Users/ericgorr/depot_quasar/vuejs-webpack-project/src/router/index.js)

[mika76]

@AlissonRS & @EricG-Personal Thank you guys so much - finally it's working - the tutorial should definitely be updated!

[joe4dev]

Confirm this fixes the issue. 👍

Do we need all the extra overrides or is this sufficient?

{
  "type": "chrome",
  "request": "launch",
  "name": "Debug Client with Chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}/src",
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
  }
}

The relative paths of node_modules etc look ok tracing with .scripts
A short comparison with the Firefox config suggests that ./ should be omitted 🤔

"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]

As Debugger for Chrome suggests:

// Note: These are the mappings that are included by default out of the box, with examples of how they could be resolved in different scenarios. These are not mappings that would make sense together in one project.
// webRoot = /Users/me/project
"sourceMapPathOverrides": {
    "webpack:///./~/*": "${webRoot}/node_modules/*",       // Example: "webpack:///./~/querystring/index.js" -> "/Users/me/project/node_modules/querystring/index.js"
    "webpack:///./*":   "${webRoot}/*",                    // Example: "webpack:///./src/app.js" -> "/Users/me/project/src/app.js",
    "webpack:///*":     "*",                               // Example: "webpack:///project/app.ts" -> "/project/app.ts"
    "webpack:///src/*": "${webRoot}/*",                    // Example: "webpack:///src/app.js" -> "/Users/me/project/app.js"
    "meteor://💻app/*": "${webRoot}/*"                    // Example: "meteor://💻app/main.ts" -> "/Users/me/project/main.ts"
}

The comment says "These are not mappings that would make sense together in one project."

[joe4dev]

It also seems that working configs as shown in this video (https://youtu.be/FOf1gKKTR14?t=268) only use a single override.

[mika76]

@joe4dev A single override didn't work for me, what worked was the first four mentioned (I definitely did not need the long list). I've also created a pull request #213 for this...

[auchenberg]

Recipe updated in #213