Angular Runtime HTML Debugging (made simple)

The Angular Runtime Rendering Engine can now be interrupted to see values before rendering decisions are made. For example, using the code below, we are able to break into a *Ngfor loop, before the actual rendering happens!

This particular example shows 3 filters when Angular hits the appDebug directive. The first two filters below are looking into a variable name setting with two properites, displayName and values. Filter3 is passing in the HTMLInputElement itself. Finally a condition filter sets a very specific condition before breaking.

    appDebug
    [filter]="setting.displayName"
    [filter2]="setting.values"
    [filter3]="checkbox"
    [condition]="setting.displayName === 'Run to completion'"

The Angular Debug Directive

import { Directive, Input, OnInit } from "@angular/core";

@Directive({
   selector: "[appDebug]"
})
export class DebugDirective implements OnInit {
   @Input("filter") filter: any;
   @Input("filter2") filter2: any;
   @Input("filter3") filter3: any;
   @Input("condition") breakPointHit: boolean = false;
   ngOnInit() {
      if (this.breakPointHit) {
         debugger;
      }
   }
}

How to use it in HTML

 <input
    #checkbox        
    appDebug   
    [filter]="setting.displayName"
    [filter2]="setting.values"
    [filter3]="checkbox"
    [condition]="setting.displayName === 'Run to completion'"
    (change)="onCheckBoxChanged(checkbox, setting)"
    [(checked)]="setting.values[0]"
    data-testid="checkbox"
    type="checkbox"
/>

This directive allows us to pass values from HTML to our debugging component. It has three filters which allow you to view the content once the breakpoint is hit. The breakpoint, is set by [condition]; which allows to to break on the Nth iteration.

Nice; instant debugging via an HTML directive!

JWP2020