Alles, was Sie über die Entwicklerkonsole wissen wollten

Gute Profis kennen ihre Werkzeuge. Eines der wichtigsten Tools, die WordPress-Entwicklern zur Verfügung stehen, ist die JavaScript-Entwicklerkonsole, die in unseren Browsern enthalten ist. In diesem Beitrag sehen wir alles, was Sie über die Browser-Entwicklerkonsole wissen müssen, zusammen mit einigen Tricks und Kuriositäten, von denen Sie vielleicht nichts wussten.

So greifen Sie auf die Entwicklerkonsole zu

Das Wichtigste zuerst: Sehen wir uns an, wie Sie die Entwicklerkonsole Ihres Browsers öffnen können. Wenn Sie ein Firefox-Benutzer sind, klicken Sie einfach auf das Menü (obere rechte Ecke) und suchen Sie nach der Option Webentwickler , wie Sie unten sehen können:

Wählen Sie dann Webkonsole aus:

und die Konsole wird in Ihrem Browser angezeigt, wie Sie im folgenden Screenshot sehen können. Denken Sie daran, dass es möglich ist, zu konfigurieren, wo genau das Panel erscheinen soll. Sie können es sogar so einstellen, dass es in einem separaten Fenster angezeigt wird (was sehr praktisch ist, wenn Sie mehrere Monitore verwenden).

Wenn Sie hingegen ein Chrome-Benutzer sind, ist die Vorgehensweise sehr ähnlich. Greifen Sie einfach auf das Menü zu, wählen Sie Weitere Tools und dann Entwicklertools aus :

So verwenden Sie die Entwicklerkonsole

Die JavaScript-Konsole unseres Browsers ist äußerst hilfreich, um unseren Code zu debuggen, zu sehen, was unsere Skripts protokollieren, und kleine Befehle auszuführen und ihre Auswirkungen auf das Web in Echtzeit zu sehen. Als Plugin-Entwickler für WordPress ist das Hauptdienstprogramm der Konsole für mich offensichtlich das Debuggen, also lassen Sie uns im Detail sehen, was es genau bietet.

#1 Verschiedene Protokollebenen

Der erste Grund, warum ein Entwickler normalerweise die JavaScript-Konsole öffnet, ist das Debuggen seines Codes. Wenn ein Fehler auftritt oder etwas fehlschlägt, finden Sie wahrscheinlich einige Informationen dazu in der Konsole. Sie können sogar Ihre eigenen Informationsmeldungen, Warnungen oder Fehler starten, wenn Sie möchten!

Im vorherigen Screenshot sehen wir beispielsweise, dass das console (globales Objekt, dessen Ziel es ist, uns beim Debuggen von Code zu helfen) verschiedene Methoden zum Schreiben von Nachrichten in die Konsole hat:

• debug und log zeigen einfache Meldungen.
• info zeigt Informationsmeldungen an. In Firefox zeigen sie neben der Nachricht ein „Info“-Symbol an.
• warn zeigt Warnungen an, die normalerweise auf ein Problem oder etwas, das nicht ganz richtig ist, hinweist. Es ist normalerweise gelb hervorgehoben und mit einem Warnsymbol versehen.
• error ist normalerweise für die schwerwiegendsten Fehler reserviert (also Dinge, die wirklich fehlgeschlagen sind). Es wird rot dargestellt und gibt auch einen Stack-Trace aus (d. h. welche Funktion den Fehler generiert hat und alle ihre Aufrufer).

Der Vorteil der Verwendung verschiedener Protokollierungsebenen besteht darin, dass wir jederzeit auswählen können, welche Nachrichten angezeigt werden sollen. Im folgenden Screenshot haben wir beispielsweise die Info- und Debug- Meldungen deaktiviert:

#2 Ausführungszeiten überwachen

In der Agilität hört man oft: „Make it work, make it well, make it fast.“ Nachdem Sie etwas Code geschrieben haben, „damit es funktioniert“, ist es nicht unwahrscheinlich, dass das Ergebnis langsam und ineffizient ist. In diesem Fall ist es wichtig, die Engpässe zu identifizieren und sie zu beheben.

Obwohl es Tools wie Profiler gibt, um die Schuldigen zu finden und genau zu verstehen, was unter der Haube vor sich geht, wollen wir manchmal eine „schnelle und schmutzige“ Lösung. Das heißt, wir wollen einfach die langsamste Funktion in unserem Code identifizieren … und einfache Timer sind für diese Aufgabe großartig!

Wenn Sie wissen möchten, wie lange die Ausführung eines bestimmten Codeabschnitts dauert, starten Sie einen Timer am Anfang des Codes ( console.time ) und stoppen Sie ihn ( console.timeEnd ), wenn Ihr Code beendet ist:

 console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' );

Wenn der Code timeEnd erreicht, sehen Sie die Zeit, die für die Ausführung benötigt wurde:

 Timer: 655ms - timer ended

Beachten Sie, dass wir beim Starten und Stoppen eines Timers ihm einen Namen geben (in meinem Beispiel „Timer“). Das liegt daran, dass wir so viele Zähler erstellen können, wie wir wollen, jeder mit seinem eigenen Namen, und sie alle gleichzeitig laufen lassen können.

# 3 Automatische Zähler

Wenn Sie daran interessiert sind, die Anzahl der Ausführungen einer beliebigen Funktion in Ihrem Code zu steuern oder die Anzahl der Schleifenausführungen zu protokollieren, verwenden console.count . Jedes Mal, wenn die Funktion ausgeführt wird, erhalten Sie in Ihrer Konsole ein neues Protokoll mit dem aktuellen Wert des Zählers:

#4 So formatieren Sie Ihre Protokolle

Protokolle sollen uns helfen zu verstehen, was mit unserem Code passiert. Das geht aber nur, wenn wir Protokolle schreiben, die wir später nachvollziehen können…

Textzeichenfolgen

Zu Beginn dieses Beitrags habe ich kurz über alle Protokollmethoden gesprochen, die die console hat. Die Beispiele, die ich geteilt habe, druckten Klartext. Das heißt, diese Aussage:

 console.log( 'Hello world!' );

diesen Text gedruckt:

 Hello world!

Was wäre, wenn wir stattdessen ein Objekt drucken wollten? Nun, das:

 obj = { x: 1, y: { a: 'hola' } }; console.log( obj );

wird das:

Aber was ist, wenn wir mehrere Dinge protokollieren wollen? Müssen wir mehrere Aufrufe von console.log ? Nun, die Antwort ist nein, es ist nicht notwendig. Wir können alles, was wir wollen, mit einem einzigen Anruf protokollieren:

Protokolle gruppieren…

Wenn wir anfangen, viele Protokolle in unserem Code zu haben (wie zum Beispiel hier):

Das Ergebnis kann etwas verwirrend sein, da alle Protokolle zu einem einzigen Textstrom zusammengeführt werden:

 Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6

Glücklicherweise bietet das console einige Methoden, um dieses Problem zu lösen: group und groupEnd . Mit ihnen können wir unsere Protokollmeldungen gruppieren. Erstellen Sie einfach die Gruppen (z. B. eine Gruppe pro Funktion):

und sie werden so angezeigt:

Tische

Wenn wir mit Datensammlungen arbeiten, ist es nicht immer einfach, sie zu visualisieren. Stellen Sie sich zum Beispiel vor, wir haben eine Liste mit Elementen wie der folgenden:

 data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ];

Wenn wir sie mit console.log , erhalten wir Folgendes:

was mehr oder weniger in Ordnung ist, bis wir mehr Objekte mit jeweils mehr Feldern haben. Wenn Sie mit dieser Art von Datenstruktur konfrontiert sind, empfehle ich Ihnen, console.table zum Protokollieren zu verwenden:

#5 Komplexe Typen (Objekte und Arrays) richtig darstellen

Abschließend möchte ich den heutigen Beitrag mit etwas beenden, das nicht viele Entwickler kennen… Nehmen wir zum Beispiel an, Sie arbeiten an einem Projekt und möchten sehen, welchen Wert ein Objekt vor und nach der Aktualisierung hat. Dazu ist es wahrscheinlich, dass Sie die Variable mit console.log , bevor Sie die Änderung vornehmen, und danach, wie Sie im folgenden GIF sehen:

Im vorherigen Beispiel protokollieren wir ein Objekt, das einen auf 1 gesetzten Wert enthält. Wir aktualisieren dann den Wert auf 200 und protokollieren das Objekt erneut. Man würde erwarten, dass das erste Protokoll immer den ursprünglichen Wert (1) anzeigt, aber beachten Sie, dass beim Erweitern des Objekts tatsächlich der neue Wert 200 angezeigt wird. Was passiert?

Grundsätzlich hat eine Protokollnachricht einen Verweis auf das Objekt und zeigt uns daher, wenn wir es erweitern, das Objekt so, wie es jetzt ist und nicht so, wie es war, als das Protokoll erstellt wurde. Verdammte Wandelbarkeit!

Um dieses Problem zu lösen, senden Sie einfach eine Kopie an das Protokoll (Bibliotheken wie lodash und seine cloneDeep Methode machen dies sehr einfach). Auf diese Weise ist das erste protokollierte Objekt eine Kopie, die nicht mutiert werden kann (weil Sie keinen Verweis darauf haben):

Und das ist alles für heute! Ich hoffe, Ihnen hat dieser Beitrag gefallen. Wenn Sie weitere Informationen zu allem wünschen, was Sie mit console tun können, sehen Sie sich die Dokumentation in MDN an. Vergessen Sie nicht, es mit Ihren Freunden zu teilen? Und wenn Sie etwas anderes machen oder unseren Lesern einen Rat geben möchten, hinterlassen Sie uns einen Kommentar ?

Bild entfernt von Tim van der Kuip auf Unsplash.