Plugin de débogage angulaireAngularJS Batarang

De nos jours, lorsque nous sommes engagés dans le développement front-end, le framework MVVM populaire est définitivement incontournable. Voici donc trois Devtools de framework populaires, si vous devez les récupérer vous-même. Outils de développement Vue.js, AngularJS BatarangReact, outils de développement. Cet article présente principalement comment utiliser AngularJS Batarang

Plug-in AngularJS Batarang

1. Comment installer le plug-in AngularJS Batarang hors ligne Veuillez vous référer à la méthode suivante : Dans l'ancienne crackée du navigateur Chrome, entrez d'abord [chrome. ://extensions/] sur la page à onglet pour accéder au programme d'extension Chrome, décompressez le plug-in que vous avez téléchargé à partir de ce site et faites-le glisser dans la page d'extension.

2. Lorsque la dernière crackée du navigateur Chrome est directement glissée et déposée pour l'installer, un message d'erreur "Paquet invalide CRX-HEADER-INVALID" apparaîtra. Veuillez vous référer à Baidu : "CRX". apparaît lors de l'installation de la solution "-HEADER-INVALID" du plug-in Chrome, qui peut être utilisée après l'installation.

3. Une fois l'installation terminée, l'icône apparaîtra dans la barre des plug-ins.

4. Ouvrez une application Angular dans le navigateur Chrome et ouvrez la console, comme indiqué ci-dessous. Vous constaterez qu'il y a une page AngularJS dans la console et que le contrôle peut être utilisé. .

5. Cliquez sur Modèles, comme indiqué ci-dessous, le côté gauche contient les informations de tous les Scopes sous l'application, et le côté droit, 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.

6.Performace montre les performances de l'application. L'arborescence de surveillance est affichée à gauche. Cliquez sur le nœud de l'arborescence pour accéder à l'élément correspondant. À droite, les performances des expressions de surveillance. Cette page peut nous aider à optimiser les performances.

7.Dependenices affiche les dépendances entre les instructions et les services. Sélectionnez une instruction pour voir les services dont elle dépend. Visualisez les dépendances entre les services à travers des graphiques. Les lignes rouges représentent les dépendances

8 Enfin, il y a 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 surbrillance sur la page pendant le débogueur.

9. Si vous avez des questions, veuillez consulter l'aide

10 Lorsqu'une balise est sélectionnée dans la balise Element, il y aura une page de propriétés AngularJS supplémentaire sur le côté droit de l'élément. Cette page affiche les propriétés de la portée du contenu HTML sélectionné. Cette fonctionnalité est très utile pour comprendre la portée angulaire. Si vous ne comprenez pas très bien Angular Scope, vous pouvez utiliser davantage cette fonction.