Befehl über die Javascript-Konsole

Befehl über die Javascript-Konsole

Nützliche Tricks zum Debuggen, Formatieren und Effizienz

Die Konsole ist eines der ersten Tools, die Entwickler kennenlernen. Die Konsole ist das Tool, mit dem Entwickler ihre eigenen Anwendungen debuggen. Das Gesetz des Instruments besagt, dass es leicht ist, in einem vertrauten Werkzeug Überbewusstsein zu entwickeln.

"Ich nehme an, es ist verlockend, wenn das einzige Werkzeug, das Sie haben, ein Hammer ist, alles so zu behandeln, als wäre es ein Nagel." -Maslow

Die gleiche Idee kann auf die Konsole angewendet werden. In einem Ökosystem, in dem Tools, Tastaturkürzel und APIs wie Milch und Honig im gelobten Land fließen, ist es schwer zu rechtfertigen, einen neuen Hammer zu nehmen, wenn Ihr alter einwandfrei funktioniert. Vertrauen Sie mir in diesem Fall, diese Zinken auf der Rückseite Ihres Hammers sind nicht nur zum Herausreißen von Nägeln gedacht.

Was folgt, sind einige der einfachsten Tricks, die ich zum Debuggen in der Konsole gefunden habe.

# 1: Argumente einpacken

Wenn Sie das in console.log{} übergebene Argument einschließen, geben Sie die Daten aus, die Sie in Objektform protokollieren. Das Objekt hat einen schönen Namen, der Ihnen sagt, was Sie ausgeben wollten.

Anstatt eine ganze Reihe von Objekten mit ähnlichen Feldern wie ID und Name in Ihrer Konsole wie folgt zu sehen:

Sie erhalten den Namen der Variablen vor den Daten, die wie folgt gedruckt werden:

# 2: Kopieren von Daten in die Zwischenablage

Sie können in der Konsole protokollierte Daten in die Zwischenablage Ihres Computers kopieren. Ich finde dies nützlich, wenn Sie ein Objekt in einer REPL bearbeiten oder Daten herausholen möchten, die Sie debuggen.

Klicken Sie mit der rechten Maustaste neben die Daten, die Sie kopieren möchten, und wählen Sie "Als globale Variable speichern". Dadurch werden die Daten als Variable in der Konsole mit einem temporären Namen gespeichert. (Wenn Sie es zum ersten Mal in einem Konsolenfenster ausführen, ist dies der Fall temp1.) Anschließend können Sie den copy()Befehl verwenden, der den Namen temp1als Argument eingibt. Dadurch werden die gespeicherten Daten in Ihre Zwischenablage kopiert, die Sie wie alles andere, was Sie kopieren, einfügen können.

Dies ist besonders hilfreich, wenn eine Datenbankabfrage keine Daten in einem Format zurückgibt, das der Bearbeitung Ihrer Daten im Frontend entspricht. Sie können Ihnen zeigen, wie Daten mutiert oder transformiert werden.

# 3: Kurzschlussausdrücke

Wenn Sie einen Ausdruck mit a kurzschließen ||, können Sie das Refactoring von Code oder das Hinzufügen einer Debug-Anweisung viel schneller durchführen. Dies ist besonders nützlich bei einzeiligen Fettpfeilfunktionen, bei denen Sie sehen möchten, welche Daten Sie als Argument erhalten.

// THISsomeFunction = data => ( )
// BECOMES...someFunction = data => console.log(data) || ( )
// RATHER THAN...someFunction = data => { console.log(data) return ( )}

Sie überspringen es, die gesamte Funktion in geschweifte Klammern zu setzen und eine Rückgabe hinzuzufügen. Dies scheint keine große Sache zu sein, bis Sie die Leistung optimieren und tausendmal versuchen, herauszufinden, welche ungeheure Sünde Sie begangen haben.

# 4: Protokoll, Fehler, Warnung

Darüber hinaus console.log()verfügt die Konsole über mehrere andere Funktionen zum Drucken von Daten in verschiedenen vordefinierten Formaten in die Konsole. Unter diesen sind:

  • console.log()
  • console.warn()
  • console.error()

# 5: Benutzerdefinierte Formatierung für die Konsolenausgabe

Sie können mehr tun , als nur die Implementierung integrierte Formatierungs mit console.log, warnund error. Sie können die Rolle des Künstlers spielen, wo die Konsole Ihre Leinwand ist!

Versuchen Sie vielleicht, eine schöne Pille um die Ausgabe zu drucken, die Sie hervorheben möchten:

Hier ist dieser Ausschnitt:

Sie können CSS auch speichern, um es als Stile in einer Variablen zu verwenden, die auf die Ausgabe angewendet werden soll. Sie können Ihre Kollegen mit einem Schuss Regenbogen punkern, um alles zu verfolgen, was Sie ausgeben. Wenn Sie möchten, dass nach allem ein humorvoller Regenbogen folgt, versuchen Sie Folgendes:

# 6: JSON als Tabelle drucken

Unbekannt für viele verfügt die Konsole über eine integrierte Methode zum Drucken von Tabellendaten im Tabellenformat. Dies kann hilfreich sein, um JSON-Daten schnell zu durchsuchen.

# 7: Einfaches Zählen

Mit dieser console.count()Methode können Sie ganz einfach verfolgen, wie oft Sie einen Punkt in Ihrem Code erreicht haben. Sie müssen Ihren Code nicht mehr in inkrementierenden Variablen pfeffern.

Pro-Tipp: Sie können "Zahl" durch eine Bezeichnung aus einer Variablen ersetzen und es wird gezählt, wie oft die Zählmethode mit dieser Bezeichnung getroffen wurde.

Ich habe festgestellt, dass dies nützlich ist, wenn Sie versuchen, die Rennbedingungen zu debuggen oder in einer React-App unnötig neu zu rendern.

# 8: Verwenden von DOM-Elementen

Sie können ein DOM-Element auf der Registerkarte Elemente auswählen und dann mit darauf zugreifen $0. Der Browser speichert tatsächlich einen Verlauf, in dem $0die aktuelle Auswahl dargestellt wird. $1repräsentiert die vorherige Auswahl. $2die vorletzte Auswahl und so weiter bis zu 5 Elemente.

Sie fragen sich vielleicht: Wann möchte ich jemals das innerHTML meiner App über die Konsole ändern? Und die Antwort wäre wahrscheinlich nur, wenn Sie ein wirklich einfaches Beispiel-GIF für einen Blog-Beitrag wünschen. Aber auch dies hat seine Anwendungsfälle.

# 9: Die Debugger-Anweisung

Wenn Sie jemals ein console.log hinzugefügt, die Browser-Tools aufgerufen und einen Haltepunkt hinzugefügt haben, um zu sehen, was passiert, wenn es um diesen Code geht, befreien Sie sich mit der debuggerAnweisung.

Wenn Sie debuggereine Zeile in Ihrem Javascript hinzufügen, stoppt der Browser und öffnet die Debugging-Tools und pausiert die Ausführung.

Obwohl es sich nicht um eine Konsolenfunktion handelt, ist es eine gute Sache zu wissen. Das Protokollieren von Informationen an der Konsole ist nicht so effektiv oder effizient wie die in Browsern integrierten Debugging-Tools (wie die Registerkarte "Quellen" von Chrome oder die Registerkarte "Debugger" von Firefox). Um Ihr Debugging weiter zu verbessern, schauen Sie sich Ressourcen an, die in diese Tools eintauchen.

Die Konsole bleibt jedoch eine sehr schnelle und effektive Methode, um den Anwendungsfluss in Apps zu sehen, in denen viele verschiedene Lebenszyklusmethoden und Re-Rendering ausgelöst werden. Wenn Sie die Verwendung auch verbessern, werden Sie zu einem besseren Entwickler.

Danke fürs Lesen!

Wenn Sie Ihre eigenen Tipps haben, teilen Sie diese bitte mit! Ich würde gerne hier in den Kommentaren, auf Twitter oder per E-Mail von Ihnen hören.

Wenn Sie das, was Sie gelesen haben, interessant oder hilfreich fanden, können Sie gerne ein oder zwei Klatschen hinterlassen, zukünftige Updates abonnieren oder diesen Tweet retweeten / teilen :?