CODEWITHSUNDEEP
javascriptreactjsdebuggingwebstormjetbrains-ide
Blake Bell
Blake Bell

Reputation: 377

Getting a 404 error when trying to setup WebStorm IDE JavaScript debugger for a create-react-app

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.

Upvotes: 0

Views: 611

Answers (1)

lena
lena

Reputation: 93728

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

Upvotes: 1

Related Questions