Debugging Vue.js 2 in WebStorm

Question

Problem is that debugger not only stepping into the right source files but also its stepping into app.js file which is autogenerated by Webpack. How can I prevent it from doing that ?

I have following setup:

I initiated Vue.js 2 app using vue-cli. My debugging configuration looks like this:

I also added this line to "webpack.dev.conf.js"; devtool: "source-map",

And I also added app.js file to exceptions in the debugger config:

I start server using npm run dev command, and then starting debugging session from WebStorm. Problem still exists. Any ideas ?

Answer 1

Please check on the following two points:

1. Change the devtool configuration to value 'eval-source-map' or '#eval-source-map' (I don't know the difference between adding '#' sign or without '#' sign, but I tested both can work as expected) in your effective webpack configuration file.

2. Add debug configuration just as the same step of yours. When you click that debug configuration from WebStorm, the system will automatically popup one window(Google Chrome or Firefox), please make sure you only doing your debug from this page, only the action triggered in this page is synchronized with your WebStorm Editor. This is very important!

It works from my dev env now.