web-dev-qa-db-fra.com

comment accéder aux données spécifiques au composant Angular2 dans la console?

Existe-t-il un moyen d'accéder aux données spécifiques aux composants spécifiques à Angular2 dans la console, à des fins de débogage?

Comme Angular1 a la capacité d'accéder à la valeur de ses composants dans la console.

debuggingconsoleangular
33
Pankaj Parkar

mise à jour 4.0.0

Exemple StackBlitz

mise à jour RC.1

Exemple Plunker Dans la console du navigateur en haut à gauche (symbole de filtre), sélectionnez plunkerPreviewTarget (ou lancez l'application de démonstration dans sa propre fenêtre) puis entrez par exemple

Sélectionnez un composant dans le nœud DOM et exécutez-le dans la console

ng.probe($0);

ou pour IE - merci à Kris Hollenbeck (voir commentaires)

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

Alternative

Astuce: l'activation des outils de débogage remplace ng.probe()

Activez les outils de débogage comme:

import {enableDebugTools} from '@angular/platform-browser';

bootstrap(App, []).then(appRef => enableDebugTools(appRef))

Utilisez l'exemple Plunker ci-dessus et exécutez par exemple dans la console:

  • 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

Je n'ai pas encore trouvé de moyen d'étudier la directive Bar.

Une meilleure expérience de débogage est fournie par Augury qui s'appuie sur cette API

original (beta)

Voici un résumé comment faire cela https://github.com/angular/angular/blob/master/TOOLS_JS.md ( lien mort et je n'ai pas trouvé de remplaçant).

Activation des outils de débogage

Par défaut, les outils de débogage sont désactivés. Vous pouvez activer les outils de débogage comme suit:

import {enableDebugTools} from 'angular2/platform/browser';

bootstrap(Application).then((appRef) => {
  enableDebugTools(appRef);
});

Utilisation des outils de débogage

Dans le navigateur, ouvrez la console développeur (Ctrl + Maj + j dans Chrome). L'objet de niveau supérieur est appelé ng et contient des outils plus spécifiques à l'intérieur.

Exemple:

ng.profiler.timeChangeDetection();

Voir également

50
Günter Zöchbauer

Utilisez l'API ci-dessous pour accéder à l'instance de composant après avoir sélectionné le composant dans chrome en utilisant inspect.

ng.probe($0).componentInstance

Ou dans chrome vous pouvez utiliser les lignes ci-dessous où 'app-root' représente le sélecteur css pour votre élément de composant

ng.probe($$('app-root')[0]).componentInstance

Ou vous pouvez créer un raccourci comme ci-dessous en enregistrant une fonction sous la portée de la fenêtre globale comme indiqué ci-dessous. Cliquez ensuite sur n'importe quel élément à l'intérieur de votre composant et appelez "e ()" à partir de la console

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

Utilisation de la variable de portée globale (tout navigateur)

index.html

<script>
    var test;
</script>

sur votre fichier composant

declare var test: any;

Après ngOnInit() de ce fichier composant

Par exemple

ngOnInit() {
   test = this;

}

Maintenant, nous pouvons accéder à toutes les variables et fonctions de ce composant, y compris les services (importés sur ce composant).

Si vous voulez empêcher l'accès à test pour la production disons, vous pouvez conditionnellement donner accès à test comme:

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

}

Ici _configService Signifie l'instance de service utilisée par tous les composants et services.
Donc, la variable serait définie comme:

export class ConfigService {
   prod = false;
}
11
vusan