Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
EricG-Personal opened this issue Mar 12, 2019 · 9 comments
Closed

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

EricG-Personal opened this issue Mar 12, 2019 · 9 comments

Comments

@EricG-Personal
Copy link

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
Copy link

AlissonRS commented Mar 15, 2019

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
Copy link
Author

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

@AlissonRS
Copy link

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

@EricG-Personal
Copy link
Author

EricG-Personal commented Mar 15, 2019

@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
Copy link
Contributor

mika76 commented May 21, 2019

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

mika76 added a commit to mika76/vscode-recipes that referenced this issue May 21, 2019
Specifically microsoft#201 (comment)

Also warning removed since that issue was resolved as a babel issue...
@joe4dev
Copy link

joe4dev commented May 25, 2019

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
Copy link

joe4dev commented May 25, 2019

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

@mika76
Copy link
Contributor

mika76 commented May 26, 2019

@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
Copy link
Contributor

Recipe updated in #213

@vscodebot vscodebot bot locked and limited conversation to collaborators Jul 28, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants