How to debug AngularJS with Intellij

In my last 2 projects, I have been using 2 different Yeoman generators: AngularJS and Jhipster. Both generators create a project with AngularJS and Grunt on the client side.

Setting up Intellij or Webstorm to debug AngularJS is not as straightforward as debugging other front-end frameworks like GWT. That’s why I am going to explain step by step how to set up Intellij to debug AngularJS.

1. Install the JetBrains IDE Support extension for Chrome

Go to the Chrome web store and add to chrome the JetBrains IDE Support.   intellijPlugin

2. Create a new JavaScript Debug configuration on Intellij

On Intellij, go to “Run > Edit configurations…”, or click on the “Edit configurations…” button on the menu:

editCOnfiguration

Then add a new JavaScript Debug configuration.

select JS

 

3. Configure your JavaScript debug configuration

Once you have created a new JavaScript configuration you will need to set it up:

  • Name: Add a name to identify your configuration.
  • URL: You will need to put here the URL where you are running your app. AngularJS and Jhipster both come with a Grunt task which starts a web server on port 9000, so my URL is “http://localhost:9000/”.
  • Browser: I have only tried it with Chrome, but should work with any other browser.
  • Remote URLs of local files: Here you will need to link your local files with your remote application. Find your index.html file within your project and set the remote URL. In my case the remote URL is http://localhost:9000/index.html.

setConfig

4. Debug your JavaScript Debug Configuration

Finally, you just need to click on “Debug” and you are ready to debug you application. If everything goes fine, a new window will be opened with the following note “JetBrains IDE Support” is debugging this tab.

Debugging

 

 

You may also like...

8 Responses

  1. nico says:

    Thanks for the help! by the way, I would like to see the date when you wrote this article ;), maybe u can enable that for your post.
    Thanks!

  2. Criss says:

    Thank you so much, this was really useful. Appreciate you sharing this useful contect

  3. Stanislav says:

    I prefer to use Codelobster with special plug-in: http://www.codelobster.com/angularjs.html

  4. COUAS says:

    Hi,

    Could i use community edition for debugging AngularJs ?

    Regards

  5. Dias Neto, J. says:

    Really usefull! Thank you.

  1. March 7, 2020

    […] to run grunt before running this configuration. If you have any query, please have a look to this post where is explained step by step how to debug AngularJS with […]

  2. June 20, 2022

    […] to run grunt before running this configuration. If you have any query, please have a look to this post where is explained step by step how to debug AngularJS with […]

  3. July 1, 2022

    […] + View More Here […]

Leave a Reply to Dias Neto, J. Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.