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?