debugging - how - debug angular visual studio code
¿Cómo acceder a los datos específicos del componente Angular2 en la consola? (3)
¿Hay alguna forma de acceder a los datos específicos de los componentes específicos de Angular2 en la consola, para fines de depuración?
Al igual que Angular1 tiene capacidad para acceder al valor de sus componentes en la consola.
Usando variable de alcance global. (Cualquier navegador)
index.html
<script>
var test;
</script>
en su archivo componente
declare var test: any;
Después de ngOnInit() de ese archivo componente
Por ejemplo
ngOnInit() {
test = this;
}
Ahora podemos acceder a todas las variables y funciones de ese componente, incluidos los servicios (importados en ese componente).
Si desea evitar el acceso a la test para, digamos, producción, puede dar acceso condicional a la test como:
constructor(private _configService: ConfigService) {
}
ngOnInit() {
if(_configService.prod) {
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;
}
Utilice la API a continuación para acceder a la instancia del componente después de seleccionar el componente en Chrome utilizando inspeccionar.
ng.probe($0).componentInstance
O en Chrome, puede usar las siguientes líneas donde ''app-root'' representa el selector css para su elemento componente
ng.probe($$(''app-root'')[0]).componentInstance
actualización 4.0.0
actualización 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) 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()
Habilitar 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 .
Augury proporciona una mejor experiencia de depuración que se basa en esta API
original (beta)
Aquí hay un resumen de cómo hacerlo https://github.com/angular/angular/blob/master/TOOLS_JS.md
Habilitar herramientas de depuración
Por defecto, 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);
});
Usando 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 dentro de él.
Ejemplo:
ng.profiler.timeChangeDetection();
Ver también