Enable breakpoints for .vue

[chrmarti]

vetur 0.5.6

The package.json would need to contribute "breakpoints": [ { "language": "vue" } ].

(microsoft/vscode#23385)

[octref]

There is no debugging functionalities built-in yet. So even if I enable breakpoints they wouldn't work.

They are the last thing on my roadmap, because AFAIK people in Vue community use https://github.com/vuejs/vue-devtools for debugging and it has been OK for most scenarios.

I'll try to find what VSCode's debugging functionality can provide in complement to vue-devtools.
But that's for later. Current focus is to make IntelliSense and formatter better.

[chrmarti]

@octref You can already debug JavaScript code in .vue files when source maps are set up correctly.

[octref]

@chrmarti Interesting. I never tried that before.
I'll give it a try this weekend and include some usage doc if it works well.

[octref]

@chrmarti I've enabled it but never got it working with chrome debugger yet.
Do you have a repo where you were able to successfully debug vue app with VSCode?

[chrmarti]

@octref It is likely an issue with the source maps. We used a starter kit (https://github.com/cheft/vue-starter-kit) and got it running with this launch config:

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}",
            "sourceMapPathOverrides": {
                "webpack:///*": "${workspaceRoot}/src/components/*"
            }
        },

Could you check in Chrome's dev tools where the transpiled files and where the original sources are? /cc @roblourens

[octref]

@chrmarti Yea I opened an issue https://github.com/Microsoft/vscode-chrome-debug/issues/430#issuecomment-301272109. I'm looking towards to get some official examples, such as https://github.com/vuejs-templates/webpack or https://github.com/vuejs/vue-hackernews-2.0 working with sourcemap debugging.

[packetstracer]

have a look at this forum thread, no IDE breakpoints but debugger statements working (with sourcemaps) on .js and .vue files.

https://forum.vuejs.org/t/debugging-vue-files-with-visual-studio-code/8022

[thoni56]

I suppose the actual link should go to https://forum.vuejs.org/t/debugging-vue-files-with-visual-studio-code/8022? Now it goes back to github...