Angular DevTools 101: Debugging and Profiling Angular Applications

Published: 18 February 2026
on channel: Deborah Kurata

4,857

332

Did you know that Angular has its own dedicated, browser-based debugging tools? Angular DevTools is a browser extension that brings Angular-specific inspection and profiling directly into your browser’s developer tools.

In this video, we’ll walk through how to add Angular DevTools to your browser and take a guided tour of its core features. Along the way, you'll see how it helps you:

🔥 See your application’s structure
🔥 Watch state changes
🔥 Diagnose change detection performance issues
🔥 Explore unfamiliar code safely
🔥 Debug without touching source code

Links

NEW Pluralsight course: "Angular: Signals": https://www.pluralsight.com/courses/a...

GitHub issue: "userDataDir": false breaks js debugging: https://github.com/microsoft/vscode/i...

Content
00:00 What Are Angular DevTools?
00:46 Installing Angular DevTools in the Browser
01:51 VSCode and the Browser's User Profile
04:11 Opening Angular DevTools
04:25 Inspecting Components
05:39 Viewing and Editing Component State
06:34 Understanding Signals with the Signal Graph
07:53 Viewing and Debugging Source Code
08:38 Performance Profiling Angular Change Detection
09:34 Exploring the Injector Tree
10:54 Exploring the Router Tree
11:21 Benefits of Angular DevTools

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and YouTube content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).

View my YouTube content: / @deborah_kurata
Contact me on Twitter: @DeborahKurata
Or on Bluesky: @deborahkurata.bsky.social
Find my Pluralsight courses: https://www.pluralsight.com/profile/a...

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#Angular
#angularTutorials
#angularforbeginners
#angularbestpractices
#modernAngular
#angulardevtools
#AngularDevTools
#Angulardebugging
#Angulardevelopertools
#DebugAngularapplications
#Angularperformanceprofiling
#InspectAngularcomponents
#Angularcomponenttree
#Angularstatedebugging
#Angularsignals
#Angularsignalgraph
#Angularchangedetection
#Angularinjectortree
#Angularroutertree
#Angulardebuggingtools
#Angulardeveloperproductivity

On this page of the site you can watch the video online Angular DevTools 101: Debugging and Profiling Angular Applications with a duration of hours minute second in good quality, which was uploaded by the user Deborah Kurata 18 February 2026, share the link with friends and acquaintances, this video has already been watched 4,857 times on youtube and it was liked by 332 viewers. Enjoy your viewing!

13,912

323