Dropped into a new Angular project with zero context?
No docs, no walkthroughs—just you, the browser, and a bug report?
Been there.
When you’re staring at a massive Angular app for the first time, it can feel like trying to solve a puzzle without knowing what the picture looks like. Luckily, Angular provides a hidden-but-powerful trick that lets you peek directly into components at runtime using Chrome DevTools.
Let’s break it down.
Step-by-Step Debugging in Chrome DevTools
1. Inspect the element
Open Chrome DevTools (F12 or right-click → Inspect) and select the DOM element you’re curious about.
That element becomes available as $0 in the DevTools console.
2. Get the Angular component instance
In the console, run:
ng.getComponent($0)
This gives you the actual Angular component instance tied to that DOM node.
You’ll see all its properties, methods, and current state.
Example output might look like:
{
someProperty: 'hello',
items: [ ... ],
toggleMenu: ƒ,
...
}
3. Modify component variables live
Once you have the component instance, you can tweak its state in real time:
ng.getComponent($0).someProperty = 'newValue';
This is great for testing UI reactions without touching the codebase.
Want to simulate how the app behaves when a flag flips or when data changes? Just set it manually.
4. Trigger Angular change detection
If the UI doesn’t update right away, manually apply changes:
ng.applyChanges($0);
Now Angular re-runs change detection, and your UI should reflect the updated state.
Bonus Tip: Works Only in Development Mode
These debugging helpers are stripped out in production builds for performance and security reasons.
So if you try this on a production app, it won’t work.
Why This Trick Is a Lifesaver
- Zero learning curve → You don’t need to know the project structure.
- Instant visibility → See component data directly without searching through files.
- Experiment fast → Toggle states, change variables, and trigger updates.
- Great for onboarding → If you’ve just joined a team, this is a quick way to get familiar with how the app behaves.
Whether you’re debugging a UI glitch, testing interactions, or tracing data flow, this method gives you a powerful peek under the hood of any Angular app.
Next time you get dropped into an unfamiliar Angular project, remember:
You don’t always need the codebase to start debugging. Sometimes, DevTools is all you need.