React-starter-kit: WebStorm Debugger

Created on 17 Jul 2016 · 6Comments · Source: kriasoft/react-starter-kit

How can we debug this using WebStorm?

I've tried running npm start run configuration with the WebStorm debugger, but it quits the process once it reaches a breakpoint. I've tried the suggestion here, https://github.com/kriasoft/react-starter-kit/issues/396#issuecomment-171331792 and it will show that the debugger is started, but the process quits when a breakpoint is reached and a tooltip is displayed in WebStorm that says "connection refused."

Source

bjackson

Most helpful comment

In Webstorm's Run/Debug Configurations, create a "Node.js" configuration:
- Under the "Configuration" tab, set "build/server.js" as the JavaScript file. Set the project root directory as the working directory. Also check the "Single instance only" checkbox. (Some Webstorm versions have a bug that requires you to add "--expose-debug-as=v8debug" as a Node parameter, or else it starts whining about v8debug not being enabled.)
- Under the "Browser/Live Edit" tab, check the "After launch" checkbox, select which browser to use in the dropdown, check the "with JavaScript debugger" checkbox, and enter "http://localhost:3000" as the target URL. (Also check the "Single instance only" box on this tab too.)
Run npm build
Click debug on that configuration and it should stop on both server and client breakpoints.

jtiscione on 21 Jul 2016

👍6

All 6 comments

In Webstorm's Run/Debug Configurations, create a "Node.js" configuration:
- Under the "Configuration" tab, set "build/server.js" as the JavaScript file. Set the project root directory as the working directory. Also check the "Single instance only" checkbox. (Some Webstorm versions have a bug that requires you to add "--expose-debug-as=v8debug" as a Node parameter, or else it starts whining about v8debug not being enabled.)
- Under the "Browser/Live Edit" tab, check the "After launch" checkbox, select which browser to use in the dropdown, check the "with JavaScript debugger" checkbox, and enter "http://localhost:3000" as the target URL. (Also check the "Single instance only" box on this tab too.)
Run npm build
Click debug on that configuration and it should stop on both server and client breakpoints.

jtiscione on 21 Jul 2016

👍6

Thanks! I'll give this a try! Will this have live reloading and all the other goodness that comes with the npm start command?

bjackson on 21 Jul 2016

I haven't figured out how to _debug_ with npm start. It tries to start the debugger before the server has pulled up the zipper on its pants. You can only run it, then debug on the client side using a separate "JavaScript debug" configuration pointing at localhost:3000.

jtiscione on 21 Jul 2016

wladiston on 22 Aug 2016

Apparently the process quits because node is running under a child process.
What I did was add the --debug arg under the runServer.js and create a remote debugger.
... cp.spawn('node', ['--debug', serverPath] ...

It isn't the best solution due I have to run the npm start first but at least the npm start and debugger work together.

wladiston on 22 Aug 2016

👍2

Failed debugging with WebStorm 2016.3, but remembered once I've succeeded debugging by following this github issue.
Then followed Debugging Webpack app’s with WebStorm 2016.1 and failed the same.
then I noticed that RSK use cheap-module-source-map in debug mode but tutorial on WebStorm Blog it refered the source-map. so build RSK with-- --release and then succeed debugging.
If you're using WebStorm 2016.3 and want to debug RSK you could try to build it in release mode or just use source-map instead of cheap-module-source-map.