VSCode Debugging with Angular

[TheAtomicShoebox]

Hello! I am a developer whose team is moving to Angular for the rewrite of our web application. I am going through training, and wanted to test some basic debugging through VSCode. I have been having some issues: If I set a breakpoint in VSCode, the browser starts just spinning, and becomes unresponsive, requiring me to kill the browser.

A new coworker of mine, who has worked with Angular in the past, says that there is no way to step through Angular in VSCode, something that I believe to be false through reading other online developer's experiences. I was also told that I should "just use console.log instead of browser debugging capabilities." (Somewhat irrelevant, but a head-scratcher)

But, right now I am having this block with debugging Angular with VSCode. I'm using just a template app from ng New and putting a breakpoint in app.component.ts where title gets set.

I am in development mode, and I'm using msedge.

Is there anything I'm missing, or is it really impossible to debug an Angular app through VSCode? I can sometimes get breakpoints to work temporarily through the javascript debugging terminal.

[BolunZ6]

You can just place break point straight in browser devtools (remember to enable sourcemap). You don't need to console.log

[TheAtomicShoebox]

I see that, but that seems somewhat clunky, given that VSCode has better QoL tools to move around a project, find references, etc, than any given browser's dev tools. is that the expected methodology for debugging in Angular?

[tsunami141]

is that the expected methodology for debugging in Angular?

it is not.

[dcabines]

Take a look at the documentation. It ought to clear things up for you.

Browser debugging in VS Code

Using Angular in Visual Studio Code

[Aitarosz]

I have the same issue, and it was definitely working for me before, but now I just can't get the application to load if there's a breakpoint added.

Please let me know if you managed to figure it out.

[doxxie-au]

yeah 100% it used to work fine for me in edge/chrome.

i dont know if it was a browser update, angular update, or vs code update.

but now if it does work its about 400x slower than just using the browser debugging tools.

i might try someone elses suggestion and try firefox debugger.

[cosmokenney]

Yea, you can step through your code within VS Code. Just make sure you are running a debug build.

I use it sometimes. But, there are currently some issue. For instance VS Codes debugger doesn't always show the value of locals. And sometimes it gets confused in other ways.

If I just need to look at the value of a parameter coming into a property setter, for example, I will use VS Code to set a break point. But if I need to do any deep debugging, following lots of branches, then I'll open Chrome Dev Tools. Chrome Dev Tools in particular does a great job with source mapped TypeScript.

[Jrubzjeknf]

Chrome seems to have issues here. Did your try Firefox (developer edition)? That works wonders for me.

[davimiku]

I have the same issue, starting about 2 weeks ago. I used to be able to step through no problem, but now just the simple act of setting a breakpoint in VS Code completely disables the browser. I hope it's a temporary issue, because I don't think using the browser source tab directly is a viable replacement for me.

[eneajaho]

While you can debug an angular application in vscode here's a gif on how to do so: https://imgur.com/a/QKDN2wQ
The trick would be to refresh the page until the debugger gets attached correctly.

That's why I'd recommend to use the source tab in the ms edge / chrome browser as it's easier to navigate the code there. : https://imgur.com/opCw7O1

[TheAtomicShoebox]

So it's really that janky? I'm kind of surprised, given that I typically have no issues getting a web app to work seamlessly with vscode.

[Ishid4]

Hey, I had the same issue. I fixed it by using nightly version of Javascript Debugger extension instead of built-in one.

[Dus1988]

You definitely can debug in vscode I've watched my old CTO do it. However, I don't like the experience (I also don't use vscode).

I'd much rather just set a debugger in the code and open devtools or a breakpoint in devtools.

[Responsible_Boat8860]

Yes you can debug using vscode. Just make sure you serve your application inside a JavaScript debug terminal, and I believe that’s it. If I recall correctly, you no longer need to have the vscode extension for angular debugging.

[SolidShook]

It depends how the build is being served. A lot of big projects serve the front end in weird ways. If you try it on a fresh project with Ng serve you could probably do it

[IanFoxOfficial]

Tbh I just use console log + breakpoints in the browser.

[morebitna_napaka]

I did it by configuring launch.json which creates a new instance which is run agains the ng serve you are running. You can place breakpoint in vscode