Was ist der beste Weg, um Winkelcode zu debuggen?

Öffnen Sie die Entwicklerkonsole im Chrome-Browser. Dies ermöglicht Ihnen Folgendes:

• Setzen Sie Haltepunkte und sehen Sie, was in Ihrem Code passiert
• Verwenden Sie die Konsole in den Entwicklertools, während Sie in Haltepunkten warten, um Code auszuführen oder den Inhalt von Variablen
zu überprüfen
• Verwenden Sie das Werkzeug "Element auswählen", um ein beliebiges HTML-Element auszuwählen, und geben Sie dann in der Konsole "$ scope" ein, um zu sehen, was sich im Bereich $ dieses Elements befindet.

allgemeine Tipps:

• Verwenden Sie ein console.log-Statement wie "running ControllerXYZ now", damit Sie sehen, wann Ihre Controller ausgeführt werden oder wann Sie zwischen den Zuständen wechseln.
• Bei der Verwendung von ui-router finde ich es extrem wichtig, eine console.log-Anweisung in die Ereignishandler $ stateChangeStart, $ stateChangeSuccess und $ stateChangeError einzufügen, die Ihnen anzeigt, wenn Sie zwischen Zuständen wechseln oder wenn Fehler bei Zustandsübergängen auftreten Ich bin blind ...
• das Hinzufügen von {{anImportantVariable | json}} in HTML reicht oft aus, um Dinge zu debuggen.

und das Wichtigste: Wenn alles in Ordnung ist und es immer noch nicht funktioniert, liegt das Problem bei 99%:

• entweder ein Scoping-Problem (siehe hier: Warum brauche ich $ parent um die Funktion in ng-click zu aktivieren wenn ion-scroll benutzt wird? )
• oder ein Rechtschreibfehler und eine Direktive werden nicht gefunden (oft wegen des CamelCase in JS zum Dash-Case in HTML: zB ngShow Direktive in JS ist ng-show in HTML und isOpen Attribut in JS ist is-open in HTML)

Wenn es darum geht, den Zustand zu überprüfen: Obwohl ich immer (ironisch) Komponententests für jede Bedingung in meinem Code schreibe (so muss ich normalerweise keine Dinge debuggen), ist dies bisher meine Lieblingstechnik:

Einfaches Beispiel: Geige

Chrome DevTools erledigen die Arbeit normalerweise ziemlich gut. Sie können eine debugger; -Anweisung irgendwo in den Code einfügen und wenn Chrome DevTools geöffnet ist, wird der Code dort stehen bleiben und Sie können weitere Breakpoint- und Polygonzuglinien einzeln hinzufügen. Abgesehen davon gibt es ein paar Erweiterungen, die Sie verwenden können, indem Sie einfach im Chrome Webstore nach Angular suchen. Diese helfen normalerweise bei der Überprüfung von $scope

Was ist mit AngularJS Batarang Chrome-Erweiterung

es gibt Ihnen einen schönen Überblick über den aktuellen Umfang innerhalb des ausgewählten Elements

Wie Sie auf dem Screenshot sehen, gibt es eine neue Bereichsregisterkarte