debug-dump.ts

import {Directive, ElementRef, Input} from "angular2/core";
import {View} from "ui/core/view";

@Directive({
    selector: '[dump]'
})
export class DumpDirective {
    @Input('dump') name: any;

    constructor(private element: ElementRef) {
    }

    public ngOnInit() {
        setTimeout(() => this.dumpView(this.element.nativeElement), 100);
    }

    public dumpView(view: View, level:number = 0) {
        const prefix = (new Array(level + 1)).join("--");
        if (level === 0) {
            console.log('DUMPING VISUAL TREE: ' + this.name);
        }
        const text = (<any>view).nodeName || view.toString();
        const id = (<any>view).text || ''
        console.log(`${prefix}${text}: ${id.substr(0, 20)}`);
        (<any>view)._eachChildView((child) => {
            this.dumpView(child, level + 1);
            return true;
        });
    }
}