Debug Vue apps with sourcemap

[octref]

As in https://github.com/Microsoft/vscode-chrome-debug/issues/430, vue already has some config for sourcemap debugging. However, there is no clear doc for setting up, and there are a lot of pitfalls.

Todo:

• Provide doc for setting up debugging
• Have a pre-configured project that can debug out of the box.

[myst729]

Debugging *.js files in Vue app is not difficult, there are plenty of tools. Debugging <script /> block in *.vue files is the real pain point. Looking forward to the functionality, definitely a killer feature.

[CXHtml]

Is there any update about debugging <script /> block in *.vue files using vscode? I find that even I debug in chrome with built-in developer tools, some lines of code in *.vue files still not be abled to set a breakpoint on it. Instead the breakpoint is set directly in its corresponding source code line. Any workaround?

[octref]

@CXHtml That's because the sourcemap is too messed up. When using webpack, try using source-map for the best result: https://webpack.js.org/configuration/devtool/

If you can't set breakpoint on a line in Chrome devtools, it's not possible to do that in VSCode either since VSCode debugging for Vue is using Chrome Debuging Protocol.

In Veturpack, I already included a launch.json that you can use with Chrome Debug. You can give it a try.

@TheLarkInn Just a reminder to push for a formal sourcemap spec :-)

[myst729]

@CXHtml I use #source-map to debug <script /> in *.vue files vuejs-templates/webpack#440 (comment)

[octref]

@myst729 Yep source-map is the only one that worked for me. And with it I have done debugging like this:

It doesn't work reliably. But others didn't even work...

[CXHtml]

Hi, I just go through the discussion Microsoft/vscode-chrome-debug#430 u guys mentioned above, and in the hacker news 2 example, I think temporarily the way we can debug with *.vue and any other imported *.js files is to override the "webpack://" path explicitly according to the info in vscode debug console after entering .scripts command. Therefore, in launch.json file:

"sourceMapPathOverrides": {
                "webpack:///ItemList.vue": "${webRoot}/src/views/ItemList.vue",
                "webpack:///ItemView.vue": "${webRoot}/src/views/ItemView.vue",
                "webpack:///UserView.vue": "${webRoot}/src/views/UserView.vue",
                "webpack:///*.vue": "${webRoot}/src/components/*.vue",
                // "webpack:///./src/*": "${webRoot}/src/*"
                "webpack:///./src/app.js": "${webRoot}/src/App.js",
                "webpack:///./src/api/*": "${webRoot}/src/api/*",
                "webpack:///./src/router/*": "${webRoot}/src/router/*",
                "webpack:///./src/store/*": "${webRoot}/src/store/*",
                "webpack:///./src/util/*": "${webRoot}/src/util/*"                
            }

I know this may looks verbose, but it actually works for any script you want to debug with Debugger for Chrome (yep, use #source-map to debug!). Another thing I want to ask is about the line I've commented. When I just override all the directories in src(like the line I comment) instead of override each of them explicitly, the sourcemap of *.vue files are messed up again. Any suggestion? Or is there any better workaround of what I proposed?

[octref]

@CXHtml I think currently there isn't any workaround.
I need to look deeper into how the vue templates are using webpack to generate those webpack URIs and how I can map them correctly.

[martinandersen3d]

Hi myst729, that really sounds great, can you please tell the quick steps to set it up? Thanks :)

What text need to go in what files?

[firewave-remo]

@octref
@myst729
Sry guys i am really new to vue and web-dev. What is #source-map what do i have to write where to get this working?

Thx a lot!

[martinandersen3d]

Finally debugging!
auchenberg from microsoft just announced the solution. I don't know what changed but it looks stable.

I just run multiple debug test with vue router also.

LINK:
https://github.com/Microsoft/vscode-chrome-debug/issues/430#issuecomment-355669306

---

First i ran a fresh install of vue (https://vuejs.org/v2/guide/installation.html)

Then:

VS Code:

1. go to "Debug" > click the dropdown and "add configuration.."
2. choose "chrome"
3. change the launch.json (projectFolder\.vscode\launch.json) to:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
    
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*",
            }
        }
    ]
}

And by updating devtool: 'source-map' in dev within config/index.js to update the webpack config.

LINK:
https://github.com/Microsoft/vscode-chrome-debug/issues/430#issuecomment-355669306

[octref]

@martinandersen3d Thanks, I'll sync with @auchenberg and update the doc on Vetur later.

[jsfeldman]

I know this is somewhat of a unique use case, but I'm trying to get debugging working in a development environment that uses both Vue and JavascriptServices. I'm trying to merge the configuration mentioned in both this issue and here, but I'm having some difficulty. To add to the confusion, I couldn't find a popular template that uses both JavascriptServices and the vue-cli template. This and this seem to be the most relevant templates right now (for my projects I just throw the whole vue-cli template into the ClientApp folder [which has its own issues]).

This might be outside of the scope of this issue (I know it's impractical to create documentation for every person's development environment) but I noticed VS Code Vue debugging being tackled in the Roadmap for January 2018 and thought it might be a good time to ask.

[octref]

@jsfeldman https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli might be useful to you. I'm not familiar with js services but you want to make sure it generates correct sourcemap.

[jsfeldman]

I see, makes sense. I'll look into it. Thanks!

[octref]

Thanks to @auchenberg, a recipe for debugging Vue app in VS Code is now available at:

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