How to debug a React Application in Webstorm

In Webstorm, start your application. I prefer the command line:
$ npm start

Then create a new JavaScript debug configuration:

Run – Edit configurations … add JavaScript Debug.

Choose your project path (because we are Harder IT Consulting, our nickname is HIT – C:\HIT\<application>)

Paste the URL http://localhost:3000 (or the URL you have configured your React Application to run on, 3000 is the default).

In the Terminal, type $npm start
When the application is started, start the Debugging:

Press the DEBUG button at the top right corner with your Debug configuration selected.

Do not forget the React Devtools which come in quite handy. They exist for Chrome, Firefox and Edge. Chrome is https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.