如何使用JavaScript断点进行调试WebStorm

Question

In WebStorm 6's debugger panel I see this:

What I must do to get these breakpoints to work?

Answer 1

I found that using 'debugger' at a point somewhere ahead of where I needed to actually hit a breakpoint was enough to actually get this working for a 'local' debug session. Without that, it didn't matter what I did, the webstorm-running-node engine would just simply run my javascript, completely ignoring breakpoints.

Here's a dummy example. I could not get the debugger to ever stop at the breakpoint at line 20. I put in the 'debugger;' entry above it, and everything started working again. If I take it out, it stops working, which is a pain, but it lets me get on with my work for now. Sooner or later I am going to accidentally leave one of them in when I do a deployment tho... :\\

Answer 2

You have to use remove debugging and you have to supply an mapping for the urls in the debug configuration so that webstorm can find the files.

This can be done via "Run" / "Edit Configurations ...". In there click on your projects base dir and double-click on the right side to enter text.

If your files are eg in "mydir/html/workspace/Project/" and are accessible via "http://localhost/Project" then enter "http://localhost/Project/" .

You will notice that now when you click on an log entrie the file which opens is your local one which you can edit while it was the remote one before.

Answer 3

I'm using Webstorm 2019.2 and I was able to set up debugging with breakpoints for a basic react app created with create-react-app as follows:

1. Run npm start to get the app running in the development mode. You can do this either in the terminal or by double-clicking the task in the npm tool window in WebStorm.

2. Create a new JavaScript debug configuration in WebStorm (menu Run – Edit configurations… – Add – JavaScript Debug). Paste http://localhost:3000/ into the URL field.

   • VERY IMPORTANT : Check the box "Ensure breakpoints are detected when loading scripts" because it's not selected by default and my breakpoints didn't work with out it.

3. Click OK to close Run/Debug Configurations

4. Set some breakpoints

5. Select the new run config from the drop down box next to the Play button

6. Press the bug button next to the play button

7. Breakpoints should fire now once the web browser comes up and you reach the code that's got breakpoints

Some of this came from Debugging React apps created with Create React App in WebStorm

For a pretty good demonstration see Debugging JavaScript in WebStorm and Chrome: create a debug configuration but don't forget the VERY IMPORTANT step above.