Debugger settings for Chrome in VS Code with Vue.js

Question

With the following settings in .vscode\launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
    ]
}

I can set a breakpoint in index.js file in my project and it triggers successfully, but the breakpoints in *.vue files triggers incorrectly.

With the following settings:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

vice versa, the breakpoints in *.vue files are triggered successfully, but I cannot set a breakpoint in my index.js file.

How to make the breakpoints work in both *.js and *.vue?

See more detailed information on how I set up the environment.

Which version of Vue CLI are you using? 2.x or 3.x? You can check this by running: `vue --version` — tony19, Nov 03 '18 at 07:02

Steve · Accepted Answer · 2019-10-01T17:32:58.150

14

I was very surprised, but adding two versions of the source map override worked for me. I can now set and have it stop on breakpoints in .vue files, .js files, and my imported es6 modules. It only took me about a month to find a solution!

Hope it works for you (this doesn't work for me anymore. See below)

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

Updated October 2019:

Debugging both js and vue files had broken for me in a recent update. I have finally found new settings that work for both:

      "sourceMapPathOverrides": {
         "webpack:///src/*.vue": "${webRoot}/*.vue",
         "webpack:///./src/*.js": "${webRoot}/*.js"
      }

edited Oct 01 '19 at 17:32

answered Nov 02 '18 at 21:37

Steve

883
7
23

How did you figure this out? – Alexey Starinsky Nov 06 '18 at 14:17
3

While examining the output of .scripts from the vscode debug console, there appeared to often be two instances of the same script, some with webpack:///./src/ and some with webpack:///src/. I wondered if it has to do with an inconsistent treatment of paths at the core with a strict string matching algorithm at the edge. So I gave it a shot and it worked. Seems to work. Examining .scripts has been useful as I subsequently figured out how to put breakpoints in a file in a separate root folder within my workspace. For example "webpack:///../library/js/*": "${webRoot}/../../library/js/*" – Steve Nov 07 '18 at 17:03

score 2 · Answer 2 · answered Sep 24 '20 at 02:53

2

And here is what is working for me in September of 2020 in vsCode 1.49.1: very similar to Steve's answer above:

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

answered Sep 24 '20 at 02:53

jomofrodo

1,119
11
19

You forgot to sourceMap the `.vue` files `"webpack:///./src/*.vue": "${webRoot}/src/*.vue"` – Mojo Allmighty Sep 24 '20 at 10:04
@MojoAllmighty actually the .vue files are picked up in the "webpack:///src/*" line. The problem is that the js files need to be mapped separately from the .vue files; so the extra line is specific to the .js files. All other types (currently only .vue) are picked up by the first line. Adding the line you are suggesting actually breaks things for me. – jomofrodo Sep 24 '20 at 16:33

Debugger settings for Chrome in VS Code with Vue.js

2 Answers2

Linked