Debugging .vue files with Visual Studio Code


#2

This is my priority right this minute too. I found this stackoverflow post.

Unfortunately, I’m stuck where commenter Stefano Nepa is. He’s unable to set breakpoints in the .vue files. According to the next comment, it’s not possible w/o a VS Code extension. At this stage I’m thinking I need to take an alternative approach, but I’m going to continue my research on the subject and I’m happy to trade notes with you.


#3

I’m stuck exactly there, too.


#4

Unfortunately I’m going to have to do it via Chrome for now. I don’t see any other option. :frowning:


#5

Not perfect, but makes it possible:

1. launch.json - add sourcemaps entry

   {
      "type": "chrome",
      "request": "launch",
      ...
      "sourceMaps": true
   },

2. Bottom of .vue file - add sourceURL comment (exact syntax important)

}      
//# sourceURL=settings.vue
</script>

3. Within .vue file - add debugger statement

    methods : {
        showGraph : function(id){
        debugger;
        ... 
        this.loadGraphFromRepId();
    }

#6

It worked @tomcon

Actually I wasn’t able to exactly replicate your instructions. However I make it work some how.

Indeed I have put this code in launch.json:

	
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "name": "Chrome",
            "request": "launch",
            "program": "${workspaceRoot}/build/dev-server.js",
            "cwd": "${workspaceRoot}",
            "outFiles": ["${workspaceRoot}/**/*.vue"],
            "sourceMaps": true
        }
    ]
}

I had to reinstall the Chrome debugger extension to make it work though

I the file where I want to place breakpoints I had to place debugger; as you suggested. On the other hand this comment //# sourceURL=settings.vue made no difference for me. It works without it so that I don’t know what I’m missing here.

After having configured everything I run npm run dev in the terminal and then launch the debugger. In the new opened window I navigate to http://localhost:8080. When I come across the code with breakpoints the debugger kicks in.

In any case thanks a lot for your help.


#7

(On July 1, 2017 in Code 1.13.1, I was able to get debugging working more easily. This might be because I installed the Vetur extension, I don’t know.)

All I had to do was add

"sourceMaps": true

to my launch.json configuration:

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

Red-circle breakpoints don’t seem to work, but any line of code that is just

debugger;

acts as a fully-functional breakpoint.


Example:

methods: {

  removeThing (thingIndex) {
    debugger
    this.things.splice(thingIndex, 1)
  }

}

The above lets me inspect the variables thingIndex and this.things perfectly! :smiley:


#8

same for me

  • vetur installed
  • added sourcemaps: true to config
  • setting debugger statements (on js or vue files)

VS Code opens de browser, opens the sourcemap file and stops where the debugger statement is at. Once de source map file is opened you can set IDE breakpoints correctly but not in the original file…that would be great but for the moment is cool.

Anyone knows how to attach to an existing tab browser instead of launching a new browser window each time? It kinda annoys me.

I get the following error when launching the attach configuration:

Got a response from the target app, but no target pages found

My attach config is set to:

{
“type”: “chrome”,
“request”: “attach”,
“name”: “Attach to Chrome”,
“port”: 9222,
“webRoot”: “${workspaceRoot}”,
“url”: “http://localhost:8080”,
“sourceMaps”: true
}


#9

Got it working. I have to launch a debugging session and the attach to it with same url.

For example if the attach url is X, the launch url has to be X also. Hope this helps!


#10

Could you elaborate, or better yet, show your exact configuration?


#11

Editor configuration:

{
  "editor.tabSize": 2,
  "editor.cursorStyle": "line-thin",
  "editor.minimap.enabled": false,
  "editor.rulers": [
80,
120
  ],
  "editor.fontSize": 12,
  "editor.scrollBeyondLastLine": false,
  "files.trimTrailingWhitespace": true,
  "editor.formatOnSave": false,
  "javascript.validate.enable": false,
  "files.associations": {
"*.vue": "html"
  },
   "standard.validate": [
 "javascript",
 "javascriptreact",
 { "language": "html", "autoFix": true }
 ],
  "standard.options": {
"globals": [
  "$",
  "jQuery",
  "fetch"
],
"ignore": [
  "node_modules/**"
],
"parser": "babel-eslint",
"plugins": [
  "html"
]
  },
  "standard.autoFixOnSave": true,
  "workbench.editor.enablePreviewFromQuickOpen": false,
  "workbench.iconTheme": "vscode-great-icons",
  "extensions.ignoreRecommendations": false
}

Debug configuration

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}"
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceRoot}"
    }
  ]
}

#12

Microsoft released a few days ago a recipe that targets that exact topic - and it works without debugger but the red circle breakpoints!: https://github.com/Microsoft/vscode-recipes/blob/master/vuejs-cli/README.md


#13

Really works, still testing but i got i working…:sunglasses:


#14

Amazing! This is what I’ve been looking for.


#15

Yes! This!
For the record, also works as an attach script like this:

  • My development url is “dsdev” mapped to localhost:

  • My “webRoot” is just the workspace folder

    {
    “name”: “Attach dsdev”,
    “type”: “chrome”,
    “request”: “attach”,
    “port”: 9222,
    “url”:“dsdev/",
    “sourceMaps”: true,
    “diagnosticLogging”: false,
    “webRoot”: “${workspaceFolder}”,
    “sourceMapPathOverrides”: {
    "webpack:///
    ”: “${webRoot}/*”
    }
    },


#16

This recipe, (vuejs-cli)[https://github.com/Microsoft/vscode-recipes/blob/master/vuejs-cli/README.md], as far as I can tell, is targeting an earlier (probably 2.X?) version of vue-cli.

From the link:

Go to config/index.js and find the devtool property. Update it to: …

But in my own vue-cli (v3.0.0-beta.1) project dosn’t have a config/ directory.

Anyone have success attaching to a vue-cli project that’s launched via yarn serve / npm run serve?


#18

The recipe also includes the instructions for vue-cli 3:

  • The devtool property needs to be set inside vue.config.js. Create the file in your project’s root directory if it doesn’t already exist.
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

Edit: Ah, I just saw that you were the author of that PR, @NiloCK. Thank you! :tada:


#19

I got it to work with the Debugger for Firefox extension as well and submitted the instructions as a PR now:


#20

In the meantime, my own VSCode debugging experience has broken - I suspect it stopped working when I added vue-cli-plugin-vuetify to my project, and some associated babel packages came in as well. I’ll have a look at your Firefox recipe. I had no idea that there even was a firefox debugging extension for VSCode - I’m pleased, since FF is my own browser.

Edit: Ahh, this works! Chrome debug breakpoints are all resetting to unverified breakpoint when I launch, but the FF debug points are working everywhere: .ts files, script lang='ts' sections of .vue files.

Thanks!


#21

This worked for me: https://vuejs.org/v2/cookbook/debugging-in-vscode.html.


#22

It doesn’t seem to work when using the TypeScript project template from vue-cli though. Getting a message after launch from the debug window:

******** Unhandled error in debug adapter - Unhandled promise rejection: Error: Could not resolve breakpoint
    at Client.processMessage (c:\Users\user\.vscode\extensions\msjsdiag.debugger-for-chrome-4.11.2\node_modules\noice-json-rpc\lib\noice-json-rpc.js:66:36)
    at LoggingSocket.Client.socket.on (c:\Users\user\.vscode\extensions\msjsdiag.debugger-for-chrome-4.11.2\node_modules\noice-json-rpc\lib\noice-json-rpc.js:42:48)
    at LoggingSocket.emit (events.js:187:15)
    at Receiver.receiverOnMessage (c:\Users\user\.vscode\extensions\msjsdiag.debugger-for-chrome-4.11.2\node_modules\ws\lib\websocket.js:742:20)
    at Receiver.emit (events.js:182:13)
    at Receiver.dataMessage (c:\Users\user\.vscode\extensions\msjsdiag.debugger-for-chrome-4.11.2\node_modules\ws\lib\receiver.js:417:14)
    at perMessageDeflate.decompress (c:\Users\user\.vscode\extensions\msjsdiag.debugger-for-chrome-4.11.2\node_modules\ws\lib\receiver.js:374:23)
    at _decompress (c:\Users\user\.vscode\extensions\msjsdiag.debugger-for-chrome-4.11.2\node_modules\ws\lib\permessage-deflate.js:298:9)
    at _inflate.flush (c:\Users\user\.vscode\extensions\msjsdiag.debugger-for-chrome-4.11.2\node_modules\ws\lib\permessage-deflate.js:376:7)
    at afterWrite (_stream_writable.js:480:3)