How to get breakpoints to work in Webstorm (react project)

Hi

Could someone please help me figure out the magic sauce required to get breakpoints to hit in Webstorm?

I'm running a React.js project. It's not a massive amount beyond the create-react-app at this point, but for the life of me i can't get any breakpoints to hit. I thought i'd just be able to run the same configuration (i.e. npm start) using debug start rather than run start but it doesn't work. Fiddling with other options doesn't work either. I even downloaded a Webstorm chrome plugin but that doesn't seem to do or activate anything either..

I can see console debug statements - so the code is being run (although i only see them in the chrome console, not the webstorm console - not sure whether that's a clue)

Any thoughts?

1 comment
Comment actions Permalink

1. Run npm start to start your application (can be done either in terminal or in WebStorm: open your package.json and press Run icon (arrow) in the gutter next to the start script

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

3. Select this configuration, press Debug

 

See https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/

6

Please sign in to leave a comment.