actualizar 4.0.0

Ejemplo de StackBlitz

actualizar RC.1

Ejemplo de Plunker En la consola del navegador en la parte superior izquierda (símbolo de filtro), seleccione plunkerPreviewTarget (o inicie la aplicación de demostración en su propia ventana) y luego ingrese, por ejemplo

Seleccione un componente en el nodo DOM y ejecútelo en la consola

 ng.probe($0);

o para IE - gracias a Kris Hollenbeck (ver comentarios)

 ng.probe(document.getElementById('myComponentId')).componentInstance

Alternativa

Sugerencia: habilitar las herramientas de depuración anula ng.probe()

Habilite herramientas de depuración como:

 import {enableDebugTools} from '@angular/platform-browser'; bootstrap(App, []).then(appRef => enableDebugTools(appRef))

Use el ejemplo anterior de Plunker y en la consola ejecute, por ejemplo:

• ng.profiler.appRef
• ng.profiler.appRef._rootComponents[0].instance
• ng.profiler.appRef._rootComponents[0].hostView.internalView
• ng.profiler.appRef._rootComponents[0].hostView.internalView.viewChildren[0].viewChildren

Todavía no he encontrado una manera de investigar la directiva del Bar de Abogados.

Augury proporciona una mejor experiencia de depuración que se basa en esta API

• https://augurio.angular.io/
• https://www.youtube.com/watch?v=b1YV9vJKXEA

originales (beta)

Aquí hay un resumen de cómo hacerlo https://github.com/angular/angular/blob/master/TOOLS_JS.md ( enlace muerto y no he encontrado un reemplazo ).

Habilitación de herramientas de depuración

De forma predeterminada, las herramientas de depuración están deshabilitadas. Puede habilitar las herramientas de depuración de la siguiente manera:

 import {enableDebugTools} from 'angular2/platform/browser'; bootstrap(Application).then((appRef) => { enableDebugTools(appRef); });

Uso de herramientas de depuración

En el navegador, abra la consola del desarrollador (Ctrl + Shift + j en Chrome). El objeto de nivel superior se llama ng y contiene herramientas más específicas en su interior.

Ejemplo:

 ng.profiler.timeChangeDetection();

Ver también

• Angular 2: cómo habilitar la depuración en angular2 desde la consola del navegador

Primero seleccione el elemento usando Chrome 'inspeccionar elemento' y ejecute el siguiente método en Chrome 'consola de desarrollo'.

 ng.probe($0).componentInstance

También puede usar un selector css como se muestra a continuación.

 ng.probe($$('.image-picker')[0]).componentInstance

Si lo hace con frecuencia, para que sea un poco más fácil, cree un acceso directo global como se muestra a continuación. Ahora seleccione cualquier elemento DOM dentro del componente usando 'inspeccionar elemento' e invoque 'e()' desde la consola

 window['e'] = () => eval('ng.probe($0).componentInstance');

Usando la variable de alcance global (cualquier navegador)

En ngOnInit() del archivo de componentes

 ngOnInit() { window['test'] = this; }

Ahora podemos acceder a la instancia de ese componente, incluidos los servicios (importados en ese componente).

Si desea evitar el acceso a la test para, digamos, producción, puede otorgar acceso condicionalmente a la test como:

 constructor(private _configService: ConfigService) { } ngOnInit() { if(_configService.prod) { window['test'] = this; } }

Aquí _configService significa la instancia de servicio utilizada por todos los componentes y servicios.
Entonces la variable se establecería como:

 export class ConfigService { prod = false; }