JavaScript-Debugging für Anfänger

  • Erforderliche Kenntnisse: Grundlegendes JavaScript
  • Benötigt: Webbrowser, einer von: Google Chrome, Firefox (mit Firebug) oder Opera
  • Projektzeit: 30 Minuten

In den letzten fünf Jahren, vor allem dank des Aufstiegs von Frameworks wie jQuery und Prototype, JavaScript hat sich zu einer First-Tier-Sprache für Skripte im Web entwickelt. Diese zunehmende Beliebtheit und Benutzerfreundlichkeit hat zur Erstellung vollwertiger Anwendungen wie Google Mail geführt, die Tausende von Zeilen JavaScript-Code enthalten, für deren Erstellung Teams talentierter Entwickler erforderlich waren.

Aufgrund dieser zunehmenden Komplexität benötigen Entwickler jedoch leistungsstarke JavaScript-Debugging-Tools, um die Ursache des Problems schnell zu ermitteln und effizient zu beheben, wenn etwas schief geht. Eine einfache wo Dump über die aufmerksam() Dialog wird es einfach nicht mehr schneiden.

In diesem Tutorial werde ich einige der Funktionen moderner Entwicklertools skizzieren, die Sie heute verwenden können, um das Debuggen von JavaScript weniger schmerzhaft zu machen. Wir konzentrieren uns hauptsächlich auf die Chrome-Entwicklertools und Firebug. Viele dieser Funktionen sind jedoch auch in anderen Tools wie Opera Dragonfly verfügbar.



  • Lesen Sie alle unsere Webdesign-Artikel Hier

01. Die Konsole - eine Übersicht

In den meisten Entwicklertools ist Ihr bester Freund der Konsole ;; Ein Mehrzweckfenster, das für die Fehlerprotokollierung, die Überprüfung des DOM, das JavaScript-Debugging und vieles mehr verwendet wird. Abhängig von Ihrem Browser ist es einfach, dieses Panel jederzeit zu starten, indem Sie:

  • Chrome Dev Tools und Opera Dragonfly - Strg + Umschalt + I.
  • Firebug - F12

Um Sie beim Debuggen von Skripten zu unterstützen, zeigt das Konsolenfenster automatisch alle Fehler in Ihrem Code an, die während der Ausführung aufgetreten sind. Neben jedem Fehler werden eine Datei und eine Zeilennummer angegeben. Wenn Sie auf die Nachricht klicken, wird zum Inline-JavaScript-Debugging in diese Zeile gesprungen - praktisch!

Keine Warnungen mehr () - Protokollierung von Daten in der Konsole

Die Konsole dient jedoch nicht nur zur passiven Anzeige von Fehlern. Es reagiert auch auf Befehle, die Sie über das übergeben API-Konsole und das Befehlszeilen-API . Das vielleicht bekannteste und hilfreichste Werkzeug ist das .Log() Befehl.

Wenn Sie irgendeine Form von Code schreiben, ist es hilfreich, den Wert einer Variablen drucken zu können, um sie zu überprüfen. In früheren Zeiten könnte ein Entwickler das verwendet haben aufmerksam() Dialog, um einen visuellen Ausdruck bereitzustellen.

Heutzutage ist die bessere Lösung die console.log Methode, die den an das Konsolenfenster übergebenen Wert wie folgt druckt:

dquo;); // druckt 'Captain's Log' im Konsolenfenster

Wir könnten dies verwenden, um den Wert einer berechneten Variablen zu drucken. Zum Beispiel:

Funktion calcPhotos () {
total_photos_diff = total_photos - prev_total_photos;
// An der Konsole anmelden
console.log (total_photos_diff);
}}

Der Nutzen dieses Ansatzes gegenüber der Verwendung des aufmerksam() Der Dialog besteht darin, dass die Codeausführung nicht angehalten wird. Daher können wir das Ergebnis einer Variablen mehrmals drucken und beobachten, wie es sich ändert, ohne dass ein Eingriff erforderlich ist.

var t = 3,
p = 1;


Funktion calcPhotos (total_photos, prev_total_photos) {
var total_photos_diff = total_photos - prev_total_photos;

// An der Konsole anmelden
console.log (total_photos_diff);

// Werte aktualisieren
t = t * 1,3;
p = p * 1,1;
}}


setInterval (function () {
calcPhotos (t, p);
}, 100);

02. Unterscheidbare Protokollierung

Im obigen Beispiel bewirkt die Schleife, dass viele Variablen in der Konsole protokolliert werden. Es ist leicht zu erkennen, wie schnell es visuell überwältigend wird, wenn viele Variablen ausgegeben werden.
Viele Benutzer kennen die Standardprotokollfunktion, aber es ist auch hilfreich zu wissen, dass es andere Konsolen-API-Befehle gibt, mit denen Sie zwischen verschiedenen Datentypen unterscheiden können, die in der Konsole protokolliert werden. Am nützlichsten sind vielleicht:

console.info () : Bietet ein visuelles Info-Symbol und eine Farbcodierung (blau), um einen Protokollaufruf „Info“ zu kennzeichnen. Nützlich, um anzuzeigen, wann etwas Wichtiges passiert

JavaScript-Debugging

console.warn () : Bietet ein visuelles Warnsymbol und eine Farbcodierung (gelb), um einen Protokollaufruf „Warnen“ zu kennzeichnen. Nützlich, um zu protokollieren, wenn etwas außerhalb eines akzeptablen Bereichs liegt

JavaScript-Debugging

console.error () : Bietet ein visuelles Fehlersymbol und eine Farbcodierung (rot), um einen Protokollaufruf „Fehler“ anzuzeigen. Nützlich, um anzuzeigen, wann etwas einen Fehlerzustand verursacht hat, den Sie hervorheben müssen

JavaScript-Debugging

Hinweis: Die Chrome-Entwicklungstools bieten derzeit keine visuelle Unterscheidung zwischen den verschiedenen Protokollierungsarten.

Die Verwendung alternativer Protokollierungsaufrufe bietet eine semantische und visuelle Unterscheidung zwischen den Informationen, die in die Konsole gedruckt werden, und kann die Lesbarkeit verbessern. Wir können immer noch hoffen, dies weiter zu verbessern, indem wir unsere Fehlermeldungen in Blöcken verwandter Anrufe gruppieren. Wir können dies mit tun console.group () ::

// 1. Gruppierung starten
console.group ('Fotoberechnung');
console.info ('Gesamtdifferenz ist jetzt' + total_photos_diff);
console.log (total_photos_diff);
console.groupEnd (); // Gruppe beenden

// 2. Gruppierung starten
console.group ('Variable inkrementieren');
console.log ('Fotos insgesamt ist jetzt:' + t);
console.log ('Vorherige Gesamtfotos sind jetzt:' + p);
console.groupEnd (); // Gruppe beenden

Dies erzeugt eine gruppierte Ausgabe in der Konsole. Die visuelle Darstellung ist in verschiedenen Werkzeugen unterschiedlich. So sieht es in Opera Dragonfly aus:

JavaScript-Debugging

In den obigen Beispielen wird nur die Oberfläche der Möglichkeiten der Konsolen-API zerkratzt. Es stehen Ihnen viele andere nützliche Befehle zur Verfügung. Ich empfehle das durchzulesen Offizielle Firebug-Wiki-Seite für eine Liste von Befehlen, obwohl es erwähnenswert ist, dass die Unterstützung für verschiedene Tools nicht unbedingt universell ist.

04. Anhalten der Skriptausführung

Die Protokollierung an der Konsole ist nützlich, aber die Dinge können schnell außer Kontrolle geraten, wenn Ihr Code schnell ausgeführt wird und Sie versuchen, mehrere Variablen im Auge zu behalten.

Um das Leben zu vereinfachen, können wir JavaScript-Debugging-Tools verwenden, um die Codeausführung an bestimmten Punkten anzuhalten, sodass Sie den aktuellen Codestatus nach Belieben beurteilen können. Die gebräuchlichste Methode, die Codeausführung in modernen Entwicklertools anzuhalten, ist die Verwendung Haltepunkte .

05. Arbeiten mit Haltepunkten

Um einen Haltepunkt festzulegen, navigieren Sie zur Registerkarte 'Skripte' und wählen Sie das Skript, an dem Sie arbeiten, aus der Liste aus. Suchen Sie nun die Zeile, in der Sie die Ausführung anhalten möchten, und klicken Sie in den Rand, um den Haltepunkt zu aktivieren. Eine visuelle Anzeige sollte angezeigt werden. Laden Sie nun die Seite neu und die Ausführung wird an der angegebenen Stelle angehalten:

JavaScript-Debugging

Wenn die Ausführung angehalten ist, können Sie den Mauszeiger jetzt über eine beliebige Variable bewegen. Der Debugger zeigt dann einen Tooltip mit Informationen zum aktuellen Wert an.

Sobald Sie bereit sind, können Sie die Codeausführung mit einer der folgenden Optionen fortsetzen Ausführungssteuerungsschaltflächen die sich normalerweise oben auf den Seitenwänden befinden. Folgende Optionen stehen zur Verfügung, um den Code zu durchlaufen:

  • 'Weiter': Setzt die Codeausführung fort, bis ein anderer Haltepunkt gefunden wird.
  • 'Step Over': Schritt für Zeile durch den Code, damit Sie sehen können, wie sich jede Zeile auf die zu aktualisierenden Variablen auswirkt. Wenn Ihr Code eine andere Funktion aufruft, springt das JavaScript-Debugging nicht in seinen Code. Stattdessen wird es „übersprungen“ und der Fokus bleibt bei der aktuellen Funktion.
  • 'Step Into': Ähnlich wie 'Step Over', außer dass der Debugger seine Ausführung in die erste Zeile der Funktionsdefinition verschiebt, wenn Sie beim Funktionsaufruf auf 'Step Into' klicken.
  • 'Step Out': Wenn Sie durch Klicken auf die Schaltfläche Step Into in eine Funktionsdefinition eingetreten sind, wird durch Klicken auf die Schaltfläche Step Out der Rest der Funktionsdefinition ausgeführt und der Debugger verschiebt seine Ausführung in die übergeordnete Funktion.

Während Sie fortfahren, können Sie die Seitenbereiche verwenden, um Änderungen im Status Ihres Codes zu verfolgen, einschließlich Aktualisierungen lokaler, geschlossener und globaler Bereichsvariablen.

06. Bedingte Haltepunkte

Da Haltepunkte die Codeausführung stoppen, ist es manchmal wünschenswert, dass sie nur ausgelöst werden, wenn bestimmte Bedingungen erfüllt sind. Wenn Ihr Code beispielsweise eine Schleife verwendet, die alle 50 ms ausgelöst wird, möchten Sie wahrscheinlich nicht, dass der Debugger bei jeder Iteration angehalten wird. Wir können dies vermeiden, indem wir a
bedingter Haltepunkt .

JavaScript-Debugging

Im obigen Beispiel wird die Codeausführung jetzt nur unterbrochen, wenn die total_photos_diff Die Variable ist größer als 200 und erspart uns viele zusätzliche Klicks im Debugger. Um einen bedingten Haltepunkt zu aktivieren, klicken Sie mit der rechten Maustaste auf den Haltepunkt am Rand und wählen Sie 'Haltepunkt bearbeiten', um den Dialog 'Bedingter Haltepunkt' anzuzeigen.

07. Haltepunkte aus Code setzen

Es ist nicht immer bequem oder sogar wünschenswert, Haltepunkte über die Benutzeroberfläche der Entwicklertools festzulegen.
Manchmal ist es einfacher, den Debugger direkt von Ihrem Code aus zu starten. Dies kann über das Schlüsselwort debugger erfolgen. Das folgende Beispiel zeigt, wie Sie die Codeausführung über eine bedingte Anweisung in Ihrem Code anhalten können:

if (total_photos_diff> 300) {
Debugger; // Starten Sie den Debugger und unterbrechen Sie die Ausführung
}}

Andere Möglichkeiten, die Ausführung anzuhalten

Neben dem manuellen Festlegen von Haltepunkten bieten Entwicklertools auch eine Reihe von Möglichkeiten, die Codeausführung in Abhängigkeit von verschiedenen Szenarien anzuhalten.

08. Pause bei DOM-Mutation

Wenn Sie einen Code debuggen möchten, der eine DOM-Mutation verarbeitet, bieten Entwicklertools eine Möglichkeit, die Codeausführung anzuhalten, wenn sich ein DOM-Knoten ändert.

Klicken Sie im Bedienfeld 'Elemente' mit der rechten Maustaste auf den Knoten, der geändert wird, und Sie erhalten eine Reihe von Optionen zum Unterbrechen bei DOM-Änderungen. Beim erneuten Laden wird die Skriptausführung angehalten, wenn das Element das nächste Mal geändert wird.

Über das Seitenfenster der DOM-Haltepunkte können Sie verfolgen, welche Haltepunkte Sie festgelegt haben.

09. Pause bei allen / nicht erfassten Ausnahmen

Mit den meisten Entwicklertools können Sie die Skriptausführung anhalten, wenn eine Ausnahme auftritt. In Chrome-Entwicklungstools kann diese Funktionalität mithilfe des Symbols 'Pause' in der unteren Zeile der Benutzeroberfläche umgeschaltet werden.

JavaScript-Debugging

Sie können wählen, ob alle Ausnahmen oder nur die Ausnahmen, die von Ihrem Skript nicht behandelt werden, unterbrochen werden sollen. Das folgende Beispiel zeigt eine nicht erfasste Ausnahme und eine, die 'abgefangen' wird (behandelt über try / catch).

var t = 3,
p = 1;


Funktion calcPhotos (total_photos, prev_total_photos) {
var total_photos_diff = total_photos - prev_total_photos;

// 1. Gruppierung starten

console.info ('Gesamtdifferenz ist jetzt' + total_photos_diff);


// Werte aktualisieren
t = t + 5;
p = p + 1;

// Nicht erfasste Ausnahme - wird angehalten
if (total_photos_diff> 300) {
0 werfen;
}}

// Ausnahme wird über try / catch abgefangen
// Wird nur angehalten, wenn 'Pause bei ALLEN Erwartungen' aktiv ist
if (total_photos_diff> 200) {
Versuchen {
$$ ('# nonexistent-element'). hide ();
} catch (e) {
console.error (e);
}}
}}

}}


setInterval (function () {
calcPhotos (t, p);
},fünfzig);

10. Eine Einführung in den Call Stack

Wenn in Ihrem Skript ein Fehler auftritt, wird die Ausführung durch Anhalten von Ausnahmen an der Stelle in Ihrem Code angehalten, an der der Fehler ausgelöst wurde. Was ist jedoch, wenn nicht klar ist, was den Fehler verursacht hat? Was hat zum Auftreten des Fehlers geführt? Wie entdecken wir diese Informationen?

Wenn die Skriptausführung angehalten wird, sehen Sie die Bedienfelder auf der rechten Seite der Werkzeugoberfläche, die eine Fülle nützlicher Informationen enthalten, von denen die wertvollste möglicherweise der Aufrufstapel ist.

Der Aufrufstapel zeigt den vollständigen Ausführungspfad an, der zu dem Punkt geführt hat, an dem der Code angehalten wurde, und bietet Ihnen eine Vogelperspektive auf den Codefluss, der zu dem Fehler geführt hat.

Im folgenden Beispiel habe ich absichtlich einen Fehler in der incrementValues ​​() Funktion, die den Debugger aufgerufen hat. Die Entwicklertools zeigen den vollständigen Aufrufstapel an, der zu dem Fehler geführt hat. Dadurch kann ich den Codefluss zurückgehen, um mögliche Probleme zu ermitteln.

JavaScript-Debugging

11. Weiterführende Literatur und Ressourcen

Hoffentlich haben die obigen Beispiele einen nützlichen Überblick über einige der Methoden gegeben, die Ihnen zur Verfügung stehen, um das Debuggen von JavaScript ein wenig zu vereinfachen.

Dieser Artikel beschreibt jedoch nur einen Vorgeschmack darauf, was erreicht werden kann. Um mehr zu erfahren, empfehle ich dringend, einige Zeit mit den folgenden Ressourcen zu verbringen, um die wahre Leistungsfähigkeit Ihrer Entwicklertools wirklich zu verstehen:

  • Firebug Wiki : Firebug ist das ursprüngliche 'Entwicklertool' und das Wiki enthält eine Fülle von Informationen zu den verschiedenen verfügbaren APIs und Tools.
  • Chrome Developer Tools-Dokumente : Die Dokumente zu den Chrome-Entwicklungstools bieten eine Fülle von Informationen, wie Sie ihre Tools optimal nutzen können. Auch die erfahrensten werden hier etwas lernen.
  • Video: ' Chrome Dev Tools neu geladen ”: Paul Irish und Pavel Feldman, die bei Google I / O 2011 gedreht wurden, bieten einen hervorragenden Überblick über die Leistungsfähigkeit der Chrome-Entwicklungstools. Ein Muß, es anzusehen!
  • Opera Dragonfly Debugger-Dokumente : Auch wenn Sie Opera nicht täglich verwenden, gelten die in der Dokumentation beschriebenen Konzepte für die meisten Entwicklertools.
  • Chrome Dev Tools Cheatsheet : Ein praktischer Ausdruck für die Arbeit mit Chrome Dev-Tools.

Mochte dies? Lese das!