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
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
