5 wesentliche Debugging-Fähigkeiten für das JS-Debugging

1. Debugger;

Ich habe auch bereits gesagt, dass Sie dem JavaScript-Code einen debugger; um manuell einen Haltepunkteffekt zu erstellen.

Benötigen Sie bedingte Haltepunkte? Sie müssen es nur mit if -Anweisungen umgeben:

Kopieren Sie den Code. Der Code lautet wie folgt: if (somethingHappens) {

Debugger;

}

Denken Sie jedoch daran, sie vor der Veröffentlichung des Programms zu löschen.

Manchmal werden Sie feststellen, dass das DOM nicht unter Ihrer Kontrolle steht und seltsame Änderungen erfährt, was es für Sie schwierig macht, die Ursache des Problems zu finden.

In den Entwicklungstools von Google Chrome gibt es eine super einfach zu bedienende Funktion namens „Break on…“ , die sich speziell für diese Situation eignet. Sie können diesen Menüpunkt sehen, indem Sie mit der rechten Maustaste auf den DOM-Knoten klicken.

Die auslösende Bedingung des Haltepunkts kann auf das Löschen des Knotens, jede Änderung der Attribute des Knotens oder eine Änderung eines seiner untergeordneten Knoten festgelegt werden.

XHR-Haltepunkte oder Ajax-Haltepunkte, wie der Name schon sagt, ermöglichen es uns, einen Haltepunkt festzulegen, der bestimmte Ajax-Aufrufe auslöst, wenn sie auftreten.

Dieser Trick ist sehr effektiv, wenn Sie den Netzwerkverkehr für Webanwendungen debuggen.

Google Chrome verfügt über einige sehr interessante Tools zur Simulation mobiler Geräte, die uns beim Debuggen der Ausführung von Programmen auf mobilen Geräten helfen.

So finden Sie es: Drücken Sie F12, um die Entwicklertools aufzurufen, und drücken Sie dann die ESC Taste (die aktuelle Registerkarte kann nicht Konsole sein). Die zweite Ebene des Debugging-Fensters wird angezeigt. Darin befinden sich verschiedene Simulationsgeräte Registerkarte „Emulation“.

Dabei handelt es sich natürlich nicht um ein echtes iPhone, sondern es werden lediglich die Abmessungen, Berührungsereignisse und Browser-Benutzeragentenwerte des iPhones simuliert.

YSlow ist ein großartiges Tool. Die Entwicklertools von Google Chrome verfügen auch über ein sehr ähnliches Tool namens Audits .

Es kann Ihre Website schnell prüfen und Ihnen sehr praktische und effektive Vorschläge und Methoden zur Optimierung Ihrer Website geben.

Ich weiß nicht, wie ich mich ohne diese Tools entwickeln würde. Ich werde auch weitere Tipps dazu schreiben – bleiben Sie gespannt auf meinen neuesten Beitrag, sobald ich es herausgefunden habe.