Debug ReactJS with WebStorm

Instead of using console.logs, WebStorm can be used to debug your development builds of your React app. You can set breakpoints, and inspect your apps in real-time, greatly expediting and simplifying your debug experience.

WebStorm is an integrated development environment for JavaScript and related technologies. Like other JetBrains IDEs, it makes your development experience more enjoyable, automating routine work and helping you handle complex tasks with ease.

source: https://www.jetbrains.com/webstorm/

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. React is used to create modular user interfaces. It promotes the development of reusable UI components that display dynamic data.

source: https://www.geeksforgeeks.org/react-js-introduction-working/

source: https://react.dev

How To:

Open WebStorm, configure a JavaScript debugger

Run -> Edit Configurations

or 

Click the drop down near the run/debug icons, select Edit Configurations

Add a new configuration, click the + button

Choose JavaScript Debug

Change the url to match your development environment, often localhost:3000 

Save

Click the Debug icon, the green bug button, next to the green play button

WebStorm by default will launch a new Chrome instance

However, it will not have any of your plugins.

You can re-install all your plugins, or better, edit the browser configuration in WebStorm

Customize browser config

File -> Settings -> Tools -> Web Browsers and Preview

Edit Chrome

Enable Use custom user data dictionary, and past in the path to your Chrome user data directory

Windows %LOCALAPPDATA%\Google\Chrome\User Data

Mac OSX ~/Library/Application Support/Google/Chrome

Linux ~/.config/google-chrome

source: https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md#Windows

Additional information from WebStorm

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

-End of Document-

Thanks for reading