How to debug angular project from Intellij utlimate? I've followed this tutorial but with no results. What am I missing? I use:
- Angular CLI: 1.6.8 - Node: 6.10.0 - OS: win32 x64 - Angular: 5.2.4 - typescript: 2.4.2 - webpack: 3.10.0 and Intellij 2017.3.4.

My configuration. Also tried with: specific mapping.

I run angular project with ng serve (tried also ng serve --sourcemaps=true). Also in tsconfig.json set sourceMap to true. File structure from chrome debugger: structure

How to debug angular project from Intellij utlimate? I've followed this tutorial but with no results. What am I missing? I use:
- Angular CLI: 1.6.8 - Node: 6.10.0 - OS: win32 x64 - Angular: 5.2.4 - typescript: 2.4.2 - webpack: 3.10.0 and Intellij 2017.3.4.

My configuration. Also tried with: specific mapping.

I run angular project with ng serve (tried also ng serve --sourcemaps=true). Also in tsconfig.json set sourceMap to true. File structure from chrome debugger: structure

• javascript
• angular
• debugging
• intellij-idea
• angular-cli

• what IDEA version do you use? Can you recreate the issue when using default angular cli app created with New | Project | Static Web | Angular CLI? – lena Commented Feb 13, 2018 at 12:05
• 1 It works on default. I've recreted angular app from scratch and copy src files and it's working. – Karolke Commented Feb 13, 2018 at 12:50
• what is the advantage of debuging code in the IDE rather than debugging in the chrome dev tools? – Anuradha Gunasekara Commented Jul 6, 2018 at 14:48

2 Answers 2

I'm running IntelliJ Ultimate. Assuming that your Angular application is already able to run on your system and you have the required plugins in place it is rather easy as I just got mine working this morning.

Add the JavaScript Debugging feature. Run -> Edit Configurations... Click the + Select JavaScript Debugging Give it a name JS Dbug Set the path to where your application runs e.g. http://localhost:4200/

Save it

Set a break-point in your code that you know will hit when the app starts

Start your application with the 'npm start' Once the application is running Click run your JS Dbug in debug mode

Load your app in the browser and it should hit the point.

*** Clarifying 2022/02/23 *** Starting your application you have 2 options.

1. From within IntelliJ, using your package.json file, click the green arrow to run the 'script that executes "ng serve"'
2. From a command line within your project folder execute the command "ng serve"

Once the process is complete and you see that the app has deployed to your localhost.

Put a breakpoint somewhere you know you can trigger. e.g. within a method that your navigation button will call.

From within IntelliJ...

• Click on Run -> Debug... from the top menu bar.
• Click on the menu item "JS Dbug ->"

This will start the debugger.

This will also launch your application in a browser from localhost.

Click on the button that will trigger the method call.

When the breakpoint hits then IntelliJ will come to the front of the screen.

In my case (for Angular 6), it was a missing configuration boolean "evalSourceMap":

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "evalSourceMap": false
}