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

Continue reading...