[Update Sep 2016: I just posted a support request with Webstorm asking for an updated tutorial on this subject. It’s Ticket WEB-23528]

It recently became possible to debug both server-side and client webpack applications with JetBrains’ WebStorm. The instructions came from a ticket WEB-20781, but they’re not in one place, so I figured I would write them out.

My application was built using react-starter-kit 0.5.1 – which is the current build as of mid-March 2016. These steps worked for me with WebStorm 2016.1 on OSX 10.10.5.

Update: WebStorm 2016.1 can automatically create the React Starter Kit 0.5.1 when you choose New Project…

Debugging Server-side Code

1. Clone the react-starter-kit repo, then npm install as usual.

2. You’ll need to tell webpack to generate source maps when debugging. Look in webpack.config.js for a line containing devtool (near line 204), and change it to:
   devtool: DEBUG ? 'source-map' : false,

3. You also have to remove references to “hash” from the output filenames. Look in the same file near line 156 for a line like this, and change it to:
   filename: DEBUG ? '[name].js' : '[name].[hash].js',

4. Create a new Run/Debug Configuration. Choose Run -> Edit Configuration, then add a “Node.js” item. Give the configuration a name, and if it isn’t already there, enter the path to your Node.js binary.

5. Enter the path to your react-starter-kit project folder in “Working Directory”.

6. For the “Javascript file:” enter the server-side code in the “build” directory. For react-starter-kit, it’s “build/server.js”

7. Save the configuration by clicking OK.

8. Build all the files by double-clicking “build” in the npm panel, or typing npm build in the command line.

9. Set some breakpoints in the server-side code.

10. In WebStorm, choose Debug (Ctl-D) for the configuration you created in 4. above. WebStorm starts debugging your server-side code, and should stop at breakpoints as expected.

Debugging Client-side Code

I haven’t needed to try these steps yet, but I understand this is the procedure:

1. Follow Steps 1-3 above.

2. Create a new Run/Debug Configuration. Choose Run -> Edit Configuration, then add a “JavaScript Debug” item. Give the configuration a name.

3. Enter the URL to your app in the “URL:” field. For react-starter-kit, it’s http://localhost:3000

4. Save the configuration by clicking OK.

5. Start the application by clicking start in the npm panel, or typing npm start from the command line.

6. Set some breakpoints in the client-side code. WebStorm should be debugging your client-side code, and should stop at breakpoints as expected.

Do you have comments/suggestions/improvements to these procedures? Leave a comment…