0

When following an article entitled, "Debugging React apps created with Create React App in WebStorm", the Debugger says it's connected to the JetBrains IDE Chrome Extension, but I can't get breakpoints to execute when using port 3000 and when I try to use the default debug port 63342 a 404 error is shown.

Here is a recording of my settings in Chrome and Webstorm 2016.2 IDE when trying to debug: http://recordit.co/MQ3LICuUIc

Steps Taken:

I've created a new JS debug configuration with the name 'ERS React Debug', the browser set to Chrome, and I've tried using the following URLs in the configuration:

http://localhost:3000/

http://localhost:3000/ers_react/public/index.html

http://localhost:63342/ers_react/public/index.html

(YT video I watched used the debug port, which is what is in my recording)

I also setup the mapping to webpack:///src as recommend in the article.

Blake Bell
  • 376
  • 5
  • 16
  • Try running the app on port 63342, see https://stackoverflow.com/a/41770848/1039555 – Kartik Aug 02 '18 at 23:48
  • Thanks for the reply @KartikKaushik. When I change the port number using the .env file to the same port number as the debugger and run `npm restart` I get the error `? Something is already running on port 63342.` Just to be sure it was the IDE I ran `netstat -a -b` and verified it was the cause. – Blake Bell Aug 03 '18 at 21:29

1 Answers1

1

Default ReactJS app created with create-react-app is designed to be hosted on webpack server started with react-scripts start, that builds the application and starts the server. You won't be able to open this application on the simple built-in webserver (localhost:63342).

To be able to debug modern React app, you need upgrading Webstorm to the most recent version - debugging will work out of the box. Fot Webstorm 2016.2, you can try specifying URL mappings... For "react-scripts": "1.0.17", it should be http://localhost:3000/static/js/full/path to project, like http://localhost:3000/static/js/C:/WebstormProjects/untitled if the project path is C:/WebstormProjects/untitled should work:

enter image description here

Note that you would need to refresh the browser page to get breakpoints in code executed on pagfe loading hit

lena
  • 90,154
  • 11
  • 145
  • 150