Debugging( adding break points ) in WebStorm for a React project or any other web project

UPDATE - READ FIRST !!!! - Good news!!! the reason that Intellij removed the amazing feature is that they made it even simpler. You just run the project and then if you have the URL in your Webstorm console, simply CMD + Shift + Click that link ... (Ctrl + Shift + Click for windows users). It will open chrome in a new session with the debugger already connected

The feature seems to be half-baked - so this only works in the Run tab - not for links in the debug tab.

As well it primarily worked for me when I simply Ran it instead of running it as Debug

A quick tutorial of debugging React projects in WebStorm using IntelliJ Chrome extension
Of course one can already do it in Chrome Devtools, but I personally find WebStorm debugger a lot more friendly

[RahulG]

UPDATE - the reason that Intellij removed the amazing feature is because they made it even more simpler. You just run the project and then if you have the URL in your Webstorm console, simply CMD + Shift + Click that link ... (Ctrl + Shift + Click for windows users). It will open chrome in new session with the debugger already connected

The feature seems to be half baked - so this only works in the Run tab - not for links in the debug tab.

As well it primarily worked for me when I simply Ran it instead of running it as Debug

[joaomendes]

Can't tell how much i did search in webstorm docs.
Ty so much for that informative video, keep it up

[subhabera]

Thanks Rahul, have been struggling with this :)

[wwnshnr]

incredibly simple yet couldn't find it anywhere. thanks a lot!

[snakeb]

apparently jetbrains removed that extension. Now you have to start the application by pressing the green triangle then from the dropdown list to left of that button select debug application

[oguzhan]

thanks rahul why ı must every time click "inspect in webstorm" ? it can do automatically?

[adivmt]

How much difference in programming webstorm makes compare to sublime or vscdoe editors

[marksimpson]

Chrome no longer has the jetbrains ide plug in. Do you know how to debug without it

[prsion]

please to say us how to set (how to tune one) debugger for react-app= how to create one step by step- please

[alexgochenour]

This video is no longer relevant--the IDE has changed a lot, and the browser extension is no longer available.