Debugging Angular apps in Rider

I googled around and found way to debug Angular apps in Rider but it doesn't feel right because of the steps it requires to do such a simple thing, so I'm here to ask if the approach is correct and if it could be improved.

I mostly work on the backend so I've got Rider as my IDE (it comes bundled with Webstorm's debugger).

Tools version information:

Angular CLI version: 17.0.6
Rider version: 2023.3.2


This is what I did:
1. Use Angular CLI to create a new project. For eg: ng new tour-of-heroes.
2. Open the app workspace directory in Rider.
3. Open Terminal and run ng serve to run the app.
4. Grab the url the app is running on. For eg: http://localhost:4200.
5. In Rider, go to Run -> Edit Configurations…

  • Click + which is Add New Configuration and select JavaScript Debug
  • Give it a name (for eg: `debug-tour-of-heroes`) and enter the url you grabbed from step 2
    Is it weird that the File/Directory section doesn't show my project files? 🤔
  • Select Debug in the dropdown menu in the bottom left of the above window, and hit Ok     

6. Click the Debug icon in the top right corner


At this point, a new browser window opens and the breakpoints start getting hit.

This feel like a lot of steps just to debug apps. 😩

Is this even the right way? Is there a better way?

1 comment

You could refer to this article to setup JS/TS configuration for your front-end application. If you are just develop the front-end project, you are using the right way to debug the application directly.

If you want to debug your front-end/backend projects simultaneously, you can refer to this blog and documentation here, Rider will auto attach JS debugger with .NET debugger attached.


Please sign in to leave a comment.