I am working on a VueJS application using Webpack, and I was able to successfully debug it using the VSCode chrome debugger after digging it out for several hours. I know your application is reactive, but I will try to explain the steps that I went through to get debugging work. Hope this helps you configure launch.json to debug the response / webpack application in VSCode. Here is my last run .json:
{ // Using the chrome debugger to debug a Vue application "type": "chrome", "request": "launch", "name": "Chrome launch", // Set the URL to match the root URL of your application "url":"http://localhost:8000/#/", "webRoot": "${workspaceRoot}", /** Configure source map paths using the instructions below */ "sourceMapPathOverrides": { "webpack:///./src/*.js": "${workspaceRoot}/src/*.js", "webpack:///src/*.vue": "${workspaceRoot}/src/*.vue", "webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*" } }
The key for me was setting the soureMapPathOverrides parameter in launch.json correctly. First, make sure that the "devtool" option in the webpack configuration is set to either the "source map" or the "cheap-eval-source-map" (I used "source-map", other settings may also work, but I have not tested them).
- Setting sourceMapPathOverrides -
What you want to do is map the source map files (which apparently don't display correctly by default, at least for me) to the appropriate location on your local computer. To do this, run the program, usually using webpack-dev-server or webpack. Then open it in Chrome and open the "sources" tab of devtools. On the Sources tab in the navigator (left by default), open the Network tab and look at the folder structure.
You should see a folder structure that looks something like this:
top localhost:8000 assets src ... (no domain) ... webpack:// (webpack) ... (webpack)-dev-server ... . ... src ...
Now you can find the translated files and source files somewhere here (if not, double check that your "devtool" was set to "source-map" or "cheap-eval-source-map", now you need to map each the source file with their location on your hard drive. It is advisable that you map them to the file extension, not individually. In the case of Vue, I had to map the .js and .vue files to their respective locations, with the node-modules folder displayed separately (as you can see in my launch.json.) This will probably be a different mapping To the reaction.
Set the launch.json url to match the url of your webpack app and your launch.json should be installed!
Now you can run the file using webpack-dev-server (or webpack) and then run the debugger. You should be able to set breakpoints in VSCode and debug as usual. Hope this helps someone.