DEV Community

JWP
JWP

Posted on • Edited on

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'"
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

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay