Debugging Angular Applications in Intellij & WebStorm

Debugging Angular Applications in Intellij & WebStorm

 

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:

  1. Javascript Support (which includes Typescript)
  2. Javascript Debugger
  3. AngularJS (which includes Angular 2+)
  4. 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.

Chrome Extension Link: https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?utm_source=chrome-ntp-icon

Both Intellij & WebStorm uses built-in web server running in port 63342 for debugging any javascript applications.

To debug the angular project, you need to create a new debug configuration:

  1. Go to Run -> Edit configurations.
  2. Click the + button (Add New Configuration) and select the JavaScript Debug.
  3. 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/.
  4. And click ok to save the configuration.

Angular-Debugging

Now you’re IDE configuation is ready to run. You need to start the local development web server using ng serve.

  1. Run the ng server command in the terminal to start the development server.
  2. 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.

chrome-jetbrains

You can put a breakpoint anywhere in your angular codebase and debug the application.

angular-breakpoint

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

Advertisements