Menu
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
326
Hold Ctrl+Shift and click this URL link. IntelliJ IDEA starts a debugging session with an automatically generated Angular Application configuration of the type JavaScript Debug.
run npm start to start your app. create the JavaScript Debug run configuration, specify your server URL there ( http://localhost:4200/ or whatever it looks like) Set the breakpoints in your code. debug the configuration above.
Run the program in debug mode Click the Run icon in the gutter, then select Modify Run Configuration. Enter arguments in the Program arguments field. Click the Run button near the main method. From the menu, select Debug.
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.
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...
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.
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
