DEV Community

loading...

Angular Runtime HTML Debugging (made simple)

John Peters
Lit-Html or Svelte?
Updated on ・1 min read

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'"
Enter fullscreen mode Exit fullscreen mode

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;
      }
   }
}
Enter fullscreen mode Exit fullscreen mode

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"
/>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)