10

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:

debugging config

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:

enter image description here

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

Improve this question
2

2 Answers 2

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This worked for me, but I did need to add the source mapping webpack:///./src to the src directory.
3

Use devtool: 'eval-source-map' instead

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.