Intellij IDEA (Ultimate Edition) and Webstorm has excellent support for developing & debugging Angular applications.
Before digging into the debugging part, you need to have the following plugins installed:
- AngularJS (which includes Angular 2+)
- Karma (optional)
You also need to install the JetBrains IDE Support extension in Google Chrome. If you’re using Firefox, then you’re out-of-luck, Jetbrains stopped supporting Firefox.
To debug the angular project, you need to create a new debug configuration:
- Go to Run -> Edit configurations.
- Change the name of the configuration as you like and change the URL with your application local development url which is usually http://localhost:4200/.
- And click ok to save the configuration.
Now you’re IDE configuation is ready to run. You need to start the local development web server using ng serve.
- Run the ng server command in the terminal to start the development server.
- Run the debug configuration from IDE: Go Run -> Debug -> Your debug configurationn name.
It’ll open your application in the chrome browser with debugging enabled.
You can put a breakpoint anywhere in your angular codebase and debug the application.
Intellij and WebStorm supports liveEdit for html pages. As you edit the content, you can see that reflect in the browser and also it will highlight the selected block of code in the browser. That’s it!.. Happy Hacking!…