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:
Use Angular CLI to create a new project. For eg: ng new tour-of-heroes
.
Open the app workspace directory in Rider.
Open Terminal and run ng serve
to run the app.
Grab the url the app is running on. For eg: http://localhost:4200
.
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
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?
It's indeed the right way, and it can be done with fewer steps in a more straightforward manner.
Set breakpoints in your code.
Start the application in development mode, for example using ng serve
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