Debugging Angular apps in Rider

Issue

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...

   1. Click + which is Add New Configuration and select JavaScript Debug

      

   2. 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? 🤔

   3. 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 feels like a lot of steps just to debug apps. 😩

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

Solution

It's indeed the right way, and it can be done with fewer steps in a more straightforward manner.

1. Set breakpoints in your code.

2. Start the application in development mode, for example using ng serve

   

3. Hold ⌘Сmd ⇧Shift and click the URL at which the application is running.

   Rider starts a debugging session with an automatically generated configuration of type JavaScript Debug.

That's it!

You'll see breakpoints being hit at this point.

 

References

1. Debug an app running on localhost
2. Debugging Angular apps in WebStorm

Answered By - Ash K