Fehlersuche in AngularJS in Chrome
Wir werden vorstellen, wie man AngularJS in Chrome debuggt.
Fehlersuche in AngularJS in Chrome
Unter der Annahme, dass wir mit Strukturen in AngularJS arbeiten, sind wir einen Umstand durchgegangen, bei dem wir Checkboxen in unserer AngularJS-Struktur haben. Sie müssen überprüfen, ob ein Kunde eines der Kontrollkästchen ausgewählt (oder eingeschränkt) hat, bevor Sie das Formular präsentieren.
Hier zeigen wir Ihnen, wie Sie am besten überprüfen können, ob ein Kontrollkästchen in Ihrem AngularJS $scope aktiviert oder nicht eingeschränkt ist.
# 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>
Ausgabe:
Am Eingang des $scope der Komponente aus dem Kontrollzentrum des Programms müssen wir diesen Code im Konsolenfenster erstellen.
# AngularJS
angular.element($0).scope();
Wir können die Anwendung ausführen und in diesem Browser drücken wir F12 zu diesem Browserfenster. Das erste, was wir tun können, ist, die Registerkarte Element zu öffnen und auszuwählen und die Komponente auszuwählen, die wir debuggen möchten.
Wir können das einzige Element sehen, das wir im obigen Beispiel haben. Daher können wir auf das Eingabeelement klicken und im Fenster das folgende Skript schreiben und eingeben.
# AngularJS
angular.element($0).scope();
Indem wir die Komponente auf der Registerkarte Element auswählen, legen wir die Daten der Komponente oder ihre Referenz in $0 ab. Es ist eine Variable.
Wir müssen uns daran erinnern, dass wir das Element auswählen müssen, indem wir darauf klicken, bevor wir auf das Element $scope zugreifen.
Wir werden feststellen, dass die Verwendung der Konsole IntelliSense zum Anzeigen der verschiedenen Techniken und Eigenschaften, die das Programm bietet, uns helfen wird, mehr in die App einzutauchen.
die Methode querySelector() in AngularJS
Es gibt jedoch eine weitere Methode, um dies zu tun, anstatt die Variable $0 zu verwenden. Wir können die Dokumentmethode .querySelector() verwenden.
# AngularJS
document.querySelector("input"); angular.element(document.querySelector("input")).scope();
Zugewiesener Wert zu AngularJS
Jetzt werden wir den Wert im Eingabefeldelement von der Konsole aus zuweisen und ändern. Beispielsweise möchten wir den Namen in diesem Feld anzeigen.
# AngularJS
angular.element($0).scope().name = 'Subhan';
Tatsächlich geschah nichts in dieser Eigenschaft; das Eingabefeld ist noch leer.
All dies wird so durchgeführt, wie der Name in der aktuellen Konsole zeigt. Es zeigt, dass der Wert in Chrome rot ist.
Wir brauchen diesen Wert jedoch in der Informationsbox. Wir müssen die Methode $apply() zum $scope hinzufügen, um die tatsächliche Änderung im Browserfenster widerzuspiegeln.
# AngularJS
angular.element($0).scope().$apply();
Wir müssen die Enter-Taste drücken, um das Wertefeld Subhan im Eingabefeld unseres Browsers zu sehen. Wir können unserer App auch andere Steuerelemente hinzufügen, z. B. eine Schaltfläche zu einigen Validierungen, um den Text oder den Wert zu überprüfen, den wir in das Eingabefeld eingegeben haben.
Fazit
Wie wir oben besprochen haben, ist es nur eine geringere Menge an Wissen. Mit dem Browser in der JS-Konsole können wir viel mehr tun, was beim Testen und Untersuchen unserer AngularJS-App helfen wird.
Wir können auf die Elemente, Eigenschaften und Daten zugreifen, um auf die Variable $scope zuzugreifen und der Variablen Werte zuzuweisen.
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