Reputation: 3631
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?
Upvotes: 1
Views: 949
Reputation: 3631
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
Upvotes: 1
Reputation: 1
I don't believe attaching a debugger in the IDE is possible in this case (for debugging js code that runs inside the browser environment, not NodeJS).
What I'd recommmend is using the browser to debug the code. You can achieve this by using either the
debugger;
on that line and open up the DevTools, it should break the execution at that point and give you the tools to navigate.Upvotes: -1