9Techniken zur Debugging von JavaScript mit den integrierten Debugging-Tools von Chrome und Firefox

Wir verwenden in der Regel Chrome oder Firefox integrierte Debugging-Tools, um Javascript zu debuggen. In diesem Artikel sind einige Tipps zur Debugging von Javascript aufgeführt. Wenn man diese beherrscht, kann man weniger Zeit mit dem Lösen von Fehlern und Bugs verbringen und die Entwicklungsleistung verbessern.

1. debugger

Neben console.log ist debugger unser Lieblings- und schnelleres Debugging-Tool. Nach dem Ausführen des Codes stoppt Chrome automatisch. Man kann es auch in Bedingungen einbetten, um es nur dann auszuführen, wenn es notwendig ist.

if (thisThing) { 
 debugger; 
}

2. Zeigen Sie Objekte in Tabellen an

Manchmal gibt es eine komplexe Gruppe von Objekten zu betrachten. Man kann sie mit console.log ansehen und durch Blättern durchsuchen, oder man kann console.table verwenden, um sie zu erweitern, was es einfacher macht, den Inhalt zu sehen, der bearbeitet wird!

var animals = [ 
 { animal: 'Horse', name: 'Henry', age: 43 }, 
 { animal: 'Dog', name: 'Fred', age: 13 }, 
 { animal: 'Cat', name: 'Frodo', age: 18 } 
]; 
console.table(animals); 

3. Verwenden Sie verschiedene Bildschirmgrößen

Es ist großartig, verschiedene Mobile Device Emulatoren auf dem Desktop zu installieren, aber in der Realität ist es nicht praktikabel. Wie kann man die Fenstergröße anpassen? Chrome bietet alles, was man braucht. Springen Sie zum Konsolentreiber und klicken Sie auf den 'Wechseln Sie in das Device-Modus'-Knopf. Beobachten Sie die Änderungen am Fenster!

　

4. Testen Sie Schleifen mit console.time() und console.timeEnd()

Es ist sehr nützlich, die Ausführungszeit eines bestimmten Codes zu kennen, insbesondere wenn es um die Debugging von langsamen Schleifen geht. Man kann auch mehrere Timer einstellen, indem man verschiedene Parameter an die Methode übergibt. Sehen wir uns an, wie es läuft:

console.time('Timer1); 
var items = []; 
for(var i = 0; i < 100000; i++}{ 
 items.push({index: i}); 
} 
console.timeEnd('Timer1); 

Das Ergebnis des Laufens war:

　

5. Formatieren Sie den Code, bevor Sie JavaScript debuggen

Manchmal kann es in der Produktionsumgebung zu Problemen mit dem Code kommen, aber Ihre Source Maps sind nicht in der Produktionsumgebung bereitgestellt. Keine Sorge. Chrome kann Ihre JavaScript-Dateien formatieren. Der formatierte Code ist vielleicht nicht so nützlich wie der wahre Code, aber zumindest können Sie sehen, was passiert. Klicken Sie auf den {}-Knopf im Quellcode-Viewer im Chrome-Konsolentreiber.

　

6. Beobachten Sie den Aufruf und die Parameter einer bestimmten Funktion
Man kann spezifische Funktionen im Chrome-Konsolenfenster beobachten. Bei jedem Aufruf der Funktion werden die übergebenen Parameter ausgegeben.

var func1 = function(x, y, z) { 
//.... 
}; 

Ausgabe:

　

Das ist eine gute Methode, um die übergebenen Funktionsparameter zu überprüfen. Aber es wäre besser, wenn der Konsolenausgabe uns die Anzahl der Formelparameter anzeigt. Im obigen Beispiel gibt func1Erwartung3Parameter, aber nur wenn2Parameter. Wenn dieser Parameter im Code nicht behandelt wird, ist ein Fehler wahrscheinlich.

7Schneller Zugriff auf Elemente im Konsolenfenster

Eine schneller Methode als querySelector im Konsolenfenster ist die Verwendung des Dollar-Symbols, $('css-selector') gibt das erste Übereinstimmungsmuster der CSS-Selektoren zurück. $$('css-selector') gibt alle Übereinstimmungen zurück. Wenn ein Element mehrmals verwendet wird, kann es als Variable gespeichert werden.

　

8Postman ist großartig (aber Firefox ist schneller)

Viele Entwickler verwenden Postman, um AJAX-Anfragen zu betrachten. Postman ist wirklich hervorragend. Aber es ist lästig, ein neues Fenster zu öffnen, einen Request-Objekt zu schreiben und sie dann zu testen.

Manchmal ist es einfacher, den Browser zu verwenden.

Wenn Sie mit dem Browser anzeigen, müssen Sie sich keine Sorgen um Authentifizierungs-Cookies machen, wenn Sie eine Passwortvalidierungsseite anfordern. Sehen Sie sich unten an, wie Sie eine Anfrage im Firefox bearbeiten und neu senden können.

Öffnen Sie die Konsole und wechseln Sie zum 'Network'-Tab. Klicken Sie mit der rechten Maustaste auf die erforderliche Anfrage und wählen Sie 'Bearbeiten und neu senden'. Jetzt können Sie jede gewünschte Änderung vornehmen. Ändern Sie den Titel und bearbeiten Sie die Parameter, dann klicken Sie auf 'Neu senden'.

Nachfolgend die beiden Anfragen, die ich mit verschiedenen Attributen ausgelöst habe:

　

9Pausieren Sie Änderungen am Knoten

DOM ist eine interessante Sache. Manchmal ändert es sich, und man weiß nicht warum. Aber wenn Sie JavaScript debuggen, kann Chrome bei Änderungen im DOM-Element anhalten. Man kann sogar seine Attribute überwachen. Mit einem Rechtsklick auf das Element im Chrome-Konsolenfenster und der Auswahl von 'Abbrechen' in den Einstellungen:

Die integrierten Web-Debugging-Tools von Chrome und Firefox sind sehr leistungsstark, viele sehr nützliche Funktionen warten darauf, von Ihnen entdeckt zu werden.