Déboguer AngularJS dans Chrome
Nous allons vous présenter comment déboguer AngularJS dans Chrome.
Déboguer AngularJS dans Chrome
En supposant que nous travaillions avec des structures dans AngularJS, nous avons passé en revue une situation où nous avons des cases à cocher dans notre structure AngularJS. Vous devez vérifier si un client a choisi (ou restreint) l’une des cases à cocher avant de présenter le formulaire.
Ici, nous vous indiquerons le moyen idéal de vérifier si une case à cocher est cochée ou non restreinte de votre AngularJS $scope.
# AngularJS
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="angApp" ng-controller="angController">
<div>
<input type="text" ng-model="myname" id="myname" />
</div>
</div>
</body>
<script>
var angApp = angular.module('angApp', []);
angApp.controller('angController',
['$scope', function () {
} ]
);
</script>
</html>
Production:
A l’entrée du $scope du composant depuis le centre de contrôle du programme, nous devrons composer ce code dans la fenêtre de la console.
# AngularJS
angular.element($0).scope();
Nous pouvons exécuter l’application, et dans ce navigateur, nous appuierons sur F12 dans cette fenêtre de navigateur. La première chose que nous pouvons faire est d’ouvrir et de choisir l’onglet Élément et de sélectionner le composant que nous souhaitons déboguer.
Nous pouvons voir le seul élément que nous avons dans l’exemple ci-dessus. Par conséquent, nous pouvons cliquer sur l’élément d’entrée, et dans la fenêtre, nous pouvons écrire le script ci-dessous et le saisir.
# AngularJS
angular.element($0).scope();
En choisissant le composant dans l’onglet Elément, on range les données du composant ou sa référence dans $0. C’est une variable.
Rappelons qu’il faut sélectionner l’élément en cliquant dessus avant d’accéder à l’élément $scope.
Nous noterons que l’utilisation de la console IntelliSense pour voir les différentes techniques et propriétés fournies par le programme nous aidera à approfondir l’application.
la méthode querySelector() dans AngularJS
Pourtant, il existe une autre méthode pour le faire au lieu d’utiliser la variable $0. Nous pouvons utiliser la méthode du document .querySelector().
# AngularJS
document.querySelector("input"); angular.element(document.querySelector("input")).scope();
Valeur assignée à AngularJS
Maintenant, nous allons attribuer et modifier la valeur à l’intérieur de l’élément de la zone de saisie à partir de la console. Par exemple, nous souhaitons afficher le nom dans cette case.
# AngularJS
angular.element($0).scope().name = 'Subhan';
En effet, rien ne s’est produit à ce titre ; la zone de saisie est encore vide.
Tout cela sera fait comme indiqué par le nom dans la console actuelle. Cela montre que la valeur est de couleur rouge dans Chrome.
Pourtant, nous avons besoin de cette valeur dans la boîte d’information. Nous devons ajouter la méthode $apply() au $scope pour refléter le changement réel dans la fenêtre du navigateur.
# AngularJS
angular.element($0).scope().$apply();
Nous devons appuyer sur la touche Enter pour voir la zone de valeur Subhan dans la zone de saisie de notre navigateur. Nous pouvons également ajouter d’autres contrôles dans notre application, comme un bouton de validation pour vérifier le texte ou la valeur que nous avons saisie dans la zone de saisie.
Conclusion
Comme nous en avons discuté ci-dessus, il y a juste moins de connaissances. Nous pouvons faire beaucoup plus en utilisant le navigateur de la console JS, ce qui nous aidera à tester et à examiner notre application AngularJS.
Nous pouvons accéder aux éléments, propriétés et données pour accéder à la variable $scope et attribuer des valeurs à la variable.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn