All 5 Angular DevTools & Debugging questions
More in Angular DevTools & Debugging
What is a helpful first step when debugging an error message shown in the browser console for an Angular app? How do you use the Profiler tab in Angular DevTools to find slow components? How would you debug a component that is not updating even though its data changed? How do you use browser DevTools breakpoints together with Angular source maps to step through your actual TypeScript code?
Advertisement
Angular › Angular DevTools & Debugging

What is Angular DevTools and how do you install it?

Beginner

Answer

Angular DevTools is a free browser extension for Chrome and Firefox that adds new tabs to your browser's developer tools, letting you inspect your app's component tree, view current inputs and state, and profile how long change detection takes for each component.
// Install from the Chrome Web Store or Firefox Add-ons page
// Search for Angular DevTools
// Once installed, open browser DevTools and look for the new Components and Profiler tabs
Real-world example A developer debugging why a component shows the wrong value opens the Components tab in Angular DevTools, clicks on the component, and immediately sees the exact input values it currently received.

Common follow-ups: Does Angular DevTools work on a production build, or only in development?;What is the difference between the Components tab and the Profiler tab?

Components & Templates;Performance & Lazy Loading
All 5 Angular DevTools & Debugging questions