Its interesting that I found this feature in Intellij IDEA only after I started to use Visual Code, one day I was pissed off because I couldn’t debug using my preferred IDE and I came across to Visual Code that was free and served with tons of plugins, but the problem was that I didn’t get used to the interface and I missed some shortcuts that Intellij IDEA provide, so I came back to Intellij.

The first thing we need to do is install the Intellij IDEA Support plugin on Chrome:

With the plugin installed we need to set up our IDE. Create a new javascript debug configuration like the picture below:

The two important things that you need to do here are:

Set the Remote URL for your root folder: webpack:///. Set the Remote URL for your src folder: webpack:///.src/

Save the configuration, place breakpoints in your code and start a new debug session. The browser will open on http://localhost:4200/. Of course the application needs to be running.

Happy coding :)