Debugging Angular apps in Rider

Question

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?

Brakesman

Why do you believe attaching a debugger in an IDE with source files where the different compiled code is actually running in a completely unmanaged browser environment is a simple thing? – Bede

Answer 1

It's indeed the right way, and it can be done with fewer steps in a more straightforward manner.

1. Set breakpoints in your code.

2. Start the application in development mode, for example using ng serve

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

1. Debug an app running on localhost
2. Debugging Angular apps in WebStorm

Brakesman

Answer 2

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

• Angular DevTools plugin to inspect your components state
• Chrome DevTools to debug your js (and css, html) code. If you want to set a breakpoint on a specific line, simply write debugger; on that line and open up the DevTools, it should break the execution at that point and give you the tools to navigate.

Intangible

also if you have access to WebStorm license I'd recommend to use that (or VSCode) for Web Development over Rider. Refactoring tooling is a bit better there (especially when you'll need to move around components). – Intangible

I'm not sure why you would assert this. It's clearly documented for Jetbrains IDEs and widely used jetbrains.com/help/webstorm/… – Bede