Angular DevTools 101: Debugging and Profiling Angular Applications

Veröffentlicht am: 18 Februar 2026
auf dem Kanal: 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

Auf dieser Seite können Sie das Online-Video Angular DevTools 101: Debugging and Profiling Angular Applications mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Deborah Kurata 18 Februar 2026 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 4,857 Mal angesehen und es wurde von 332 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!