Explication détaillée de l'utilisation du plug-in de navigateur d'Angular Batarang

Cette fois, je vous apporte une explication détaillée de la façon d'utiliser le plug-in de navigateur Angular Batarang. Quelles sont les précautions lors de l'utilisation du plug-in de navigateur Angular Batarang. cas, jetons un coup d'oeil.

Présentation du plug-in de navigateur Angular Batarang

Pour ceux qui découvrent Angular, ce sera assez douloureux lorsqu'ils prendront Angular pour la première fois. En effet, comparé à JQuery, Backbone, etc., Angular a un seuil relativement élevé et est plus difficile à déboguer. Aujourd'hui je vous apporte un Angular Une introduction au plug-in Chrome Batarang. L'utilisation du plug-in vous aidera à approfondir votre compréhension d'Angular.

Préparation

Installer Batarang :

1. Méthode 1 : recherchez Batarang dans le Chrome App Store et installez-le.

2. Méthode 2 : recherchez le package d'installation de Batarang en ligne et installez-le directement dans le navigateur Chrome.

Utiliser

Ouvrez une application Angular dans le navigateur avec le plug-in Batarang installé et ouvrez la console, comme indiqué ci-dessous :

Vous constaterez qu'il y a une page AngularJS supplémentaire dans la console. Cochez "Activer" et le contrôle peut être utilisé :

. Modèles

Cliquez sur Modèles. Le côté gauche contient les informations de tous les scopes sous l'application, et le côté droit contient les informations du modèle correspondant au scope. Cliquez sur une portée et toutes les informations sur le modèle dans la portée seront affichées à droite.

En cliquant sur "<" avant Scope, vous accéderez à la balise DOM où se trouve la portée dans Elements.

Performances

Performace montre les performances de l'application. Le côté gauche montre l'arborescence de surveillance, et le côté droit montre les performances de l'expression de surveillance. Cette page peut nous aider à effectuer une optimisation des performances.

Dépendances

Dépendances affiche les dépendances entre les instructions et les services. En sélectionnant une instruction, vous pouvez voir les services dont elle dépend.

Options

Enfin, la page des options. Il existe trois options : « afficher les applications », « afficher les étendues » et « afficher les liaisons ». Lorsque chaque option est cochée, le contenu correspondant sera mis en évidence sur la page lors du débogueur

aide

Si vous avez des questions, veuillez consulter l'aide

Élément

En fait, ce que j'utilise le plus, c'est AngularJS sur le côté droit d'Element. Onglet Propriétés. Lorsqu'une balise est sélectionnée dans la balise Element, le contenu sur le côté droit de la page Element aura un AngularJS supplémentaire Page de propriétés, qui affiche les propriétés de la portée du contenu HTML sélectionné. Cette fonction est utile pour Angular. La compréhension de la portée est très utile. Si vous ne comprenez pas très bien Angular Scope, vous pouvez utiliser davantage cette fonction.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment nodejs utilise Redis pour encapsuler le cache

Encapsulation personnalisée de composants inter-domaines Ajax

Express+multer implémente les étapes spécifiques pour télécharger des images de nœuds

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!