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?