Es ist mal wieder so weit: Das Jahr neigt sich dem Ende zu. Einige von Ihnen haben gerade Thanksgiving gefeiert, während der Rest der Welt nur den Black Friday „gefeiert“ hat. Aber ich spreche von den 24 Tagen vor Weihnachten. Ich hatte mir 2015 mir das Ziel gesetzt, jeden Tag einen Blogbeitrag zu schreiben. Das habe ich 2015 und 2016 auf Deutsch auch geschafft. Ich habe dann 2017 versucht, auch Englisch zu schreiben, aber nach nur 10 Tagen musste ich aufhören. Seitdem habe ich es nicht mehr versucht.

Neustart des Adventskalenders

Dieses Jahr werde ich es wieder versuchen. Bei den vergangenen Ausgaben hatte ich nicht wirklich alle Themen geplant, wenn überhaupt irgendwelche. Aber in diesem Jahr war ich eine Woche früher bereit und habe bereits 24 potenzielle Themen gesammelt, über die ich schreiben kann. Ich werde mich auf Frontend-Themen und Debugging konzentrieren. Jeden Tag werde ich über eines dieser vier Themen schreiben:

• Debugging
• JavaScript
• CSS
• HTML

Die Themen werden sich immer abwechseln. Heute bekommt ihr also ein Debugging-Thema und dann wieder in 4 Tagen. Das Thema Debugging kam mir in den Sinn, weil wir im Team eine interne Lern-Sitzung zu Xdebug hatten und uns im Anschluss daran mit dem Debugging im Browser beschäftigt haben. In meinen 6 Blogbeiträgen zu diesem Thema werde ich mich auf das Debugging im Browser konzentrieren.

Logging im Browser

Das Thema Debugging ist sehr umfangreich und moderne Browser bieten zahlreiche Möglichkeiten, Dinge zu debuggen. Fangen wir also mit etwas Grundlegendem an: dem Protokollieren von Dingen in JavaScript.

Wenn ihr einen Code in JavaScript schreibt, möchten ihr ihn vielleicht debuggen und den Wert bestimmter Dinge im Ablauf eines Stücks eures Codes sehen. Dazu können Sie die Funktion console.log() verwenden:

console.log(some_variable);

Ihr könnt diese Zeile in eine JavaScript-Datei in einem (externen) JavaScript-Code einfügen, den ihr in eurem Projekt verwenden, aber ihr könnt sie auch direkt in der Browser-Konsole verwenden. Alle modernen Browser verfügen über eine solche JavaScript-Konsole. In Chrome kann man sie mit „STRG + UMSCHALT + J“ (Windows und Linux) öffnen.

Einige Werte protokollieren

Nach dem Öffnen der Registerkarte „Console“ in den DevTools können ihr beliebigen JavaScript-Code in die „Eingabezeile“ am Ende der Konsole eingeben. Lasst uns hier mal etwas debuggen:

In diesem sehr einfachen Beispiel testen wir den Wert der aktuellen URL der Website. Die erste Zeile nach unserem ausgeführten Code ist die Ausgabe der Funktion console.log(). Die zweite Zeile mit dem undefined Wert ist die Rückgabe der Funktion selbst.

Wenn ihr die Browser-Konsole verwendet, brauchen ihr die Funktion console.log() nicht einmal. Ihr könnt den JavaScript-Code direkt in die Zeile eingeben und die Eingabetaste drücken. Die console.log() Funktion wird normalerweise in einem (externen) Skript auf eurer Website verwendet:

const colors = ["red", "green", "blue"];
const capitalizedColors = colors.map(item => {
	console.log(item);
	return item.charAt(0).toUpperCase() + item.slice(1);
});
console.log(capitalizedColors);

Nehmen wir diesen Beispielcode. Wir haben ein Array mit Farben und wollen die Werte großschreiben. Wir verwenden die Funktion map() für das Array. Innerhalb der Funktion loggen wir das aktuelle item und nach der Ausführung der Funktion die resultierende Variable capitalizedColors. Die Protokollierung im Browser sieht wie folgt aus:

Da das Array drei Elemente hat, sehen wir drei Zeilen mit dem jeweiligen Wert. Am Ende jedes protokollierten Wertes sehen wir einen Verweis index.html:6, der den Dateinamen und die Zeile in dieser Datei angibt, in der das Logging durchgeführt wurde. Wir sehen auch das protokollierte Array, das ich bereits durch Klicken auf den kleinen Pfeil erweitert habe. Chrome zeigt uns sogar die Länge des Arrays und den „[[Prototype]]“ für das Array an. Wenn wir diesen aufklappen, können wir alle Eigenschaften und Funktionen des Arrays sehen. Hier würden wir auch die map() Funktion finden, die wir gerade verwendet haben.

Fazit

Das sollte für heute genug sein. Viele von Ihnen werden diese Funktion wahrscheinlich schon kennen. Aber wusstet ihr, dass es noch mehr Debugging-Funktionen gibt? In den folgenden Blogbeiträgen im Dezember werden wir einige davon genauer unter die Lupe nehmen.

Ich verwende hauptsächlich die Chrome DevTools, aber ihr könnte auch die Firefox DevTools auf ähnliche Weise verwenden. Wenn ihr Safari, Edge, Brave oder einen anderen gängigen Browser verwendet, sucht einfach nach Dokumentation dazu, wie ihr mit diesen Tools arbeiten könnt. Probieren es also aus und debugge deinen eigenen JavaScript-Code.