Although using this technique is not perfect at the moment, it is definitely good to know about its existence.
Structural Directive Breakpoints
It’s a cool trick to quickly inspect your angular
*ngIf context, property binding or event binding event data! This also works with other structural directives like
Let’s say you had a template node for a paragraph
p with the
*ngIf directive which was assigned an expression. Add a breakpoint to this node in your browser’s devtools.
It seems like whenever the expression evaluates to
false, your breakpoint will get triggered and you can actually inspect the
NgIfContext in your Local Scope to see if the resulting expression is true in the
You can also add the breakpoint to the
*ngIf attribute by putting it on it’s own line. This will enable you to inspect your component in the Local Scope every time change detection runs and the expression is evaluated.
This works with
*ngFor as well.
Event Binding Breakpoints
Similarly you can also add breakpoints to your event binding expressions to debug the event context.
You can inspect the
$event in the Local Scope of your debugger as well as find the component instance in the
As a bonus, you can also install Angular DevTools as a chrome extension which give’s you ability to inspect the properties of your component instance in real time among other cool debugging features!
Feel free to reach out and let me know how it works for you ;)