Tipps für die Browser-Konsole: Viel mehr als nur ein Log

Mit der Browser-Konsole lassen sich Informationen von Skripten loggen - aber noch viel mehr. Hier einige Tipps zur besseren Nutzung dieses Werkzeuges.

Eine Anleitung von Christian Heilmann veröffentlicht am
Die Browser-Konsole kann mehr sein als nur eine Art Logbuch fürs Skript.
Die Browser-Konsole kann mehr sein als nur eine Art Logbuch fürs Skript. (Bild: Pixabay)

Fragt man Javascript-Entwickler, wie sie Fehler in ihrem Frontend-Code finden und beheben, ist die Antwort fast immer console.log(). Allerdings ist die Möglichkeit, Informationen von Skripten zu loggen, nur eine der praktischen Anwendungen der Browser-Konsole. Dieser Text gibt Tipps, wie man sein Konsolenvokabular erweitert und dieses Werkzeug besser nutzt.

Inhalt:
  1. Tipps für die Browser-Konsole: Viel mehr als nur ein Log
  2. Log-Nachrichten gruppieren
  3. Logpoints in fremdem Code setzen

Die Konsole ist Teil der Entwicklerwerkzeuge und in allen Browsern vorhanden. Man kann sie am schnellsten mittels Ctrl + Shift + J (Windows und Linux) oder Command + Option + J (Apple Macintosh) öffnen.

Die Konsole ist ein sogenannter REPL (Read Eval Print Loop), was bedeutet, dass man Javascript schreiben kann, es evaluiert und das Ergebnis sofort zurückgegeben wird. Wenn man also "3 + 9" eingibt, bekommt man "12" zurück.

Die Konsole geht sogar noch weiter, indem sie schon bei der Eingabe Zwischenergebnisse darstellt. Außerdem gibt es eine automatische Vervollständigung, die es erlaubt, Methoden und Eigenschaften von Objekten herauszufinden. Da die Konsole Zugriff auf das Browserfenster hat, kann man zum Beispiel window. eingeben und bekommt eine ganze Menge Optionen angezeigt.

  • Anzeige einfacher Berechnungen und Autovervollständigung in der Konsole (Screenshot: Christian Heilmann)
  • Komplexe Anfrage in der Konsole mit anschließendem Kopieren in die Zwischenablage (Screenshot: Christian Heilmann)
  • Die gleiche Information auf verschiedene Art und Weise dargestellt (Screenshot: Christian Heilmann)
  • Beispiel der Darstellung eines Arrays als Gruppe von Logs in der Konsole (Screenshot: Christian Heilmann)
  • Alle Links auf Golem.de, die "video" beinhalten, als Tabelle in der Konsole (Screenshot: Christian Heilmann)
  • Einen Logpoint im Sources-Werkzeug setzen (Screenshot: Christian Heilmann)
  • Als zu loggenden Inhalt verwenden wir window.innerWidth. (Screenshot: Christian Heilmann)
  • Konsole mit der Information, wie breit das Fenster war, als der Code der Seite ausgeführt wurde (Screenshot: Christian Heilmann)
  • Geschwungene Klammern um eine Variable herum bedeutet, dass der Name und der Wert der Variable ausgegeben wird. (Screenshot: Christian Heilmann)
Anzeige einfacher Berechnungen und Autovervollständigung in der Konsole (Screenshot: Christian Heilmann)
Stellenmarkt
  1. SAP FICO Berater (m/w/x)
    über duerenhoff GmbH, Raum Frankfurt am Main
  2. DevOps/IT Operations Engineer (w/m/d) Container Platform
    ING Deutschland, Nürnberg
Detailsuche

Zudem hat die Konsole einen eigenen Verlauf, der auch als automatische Vervollständigung angeboten wird. Mittels der Pfeil-nach-oben- und Pfeil-nach-unten-Tasten kann man in dem Verlauf navigieren.

Oft gibt man etwas in die Konsole ein und will das Ergebnis weiterverwenden, indem man es in die Zwischenablage kopiert. Das kann je nach Format des Ergebnisses anstrengend sein. Um das zu erleichtern, gibt es den copy()- Befehl, der das Ergebnis in die Zwischenablage kopiert.

Weiterhin speichert die Konsole das letzte Ergebnis in der Variable $_. Wenn man also mit dem Ergebnis einer Eingabe zufrieden ist, kann man es mittels copy($_) kopieren, ohne mit der Maus irgendetwas markieren zu müssen - beispielsweise den Text der ersten zehn Überschriften auf der Golem.de-Webseite, wenn man dort die Konsole geöffnet hat.

  • Anzeige einfacher Berechnungen und Autovervollständigung in der Konsole (Screenshot: Christian Heilmann)
  • Komplexe Anfrage in der Konsole mit anschließendem Kopieren in die Zwischenablage (Screenshot: Christian Heilmann)
  • Die gleiche Information auf verschiedene Art und Weise dargestellt (Screenshot: Christian Heilmann)
  • Beispiel der Darstellung eines Arrays als Gruppe von Logs in der Konsole (Screenshot: Christian Heilmann)
  • Alle Links auf Golem.de, die "video" beinhalten, als Tabelle in der Konsole (Screenshot: Christian Heilmann)
  • Einen Logpoint im Sources-Werkzeug setzen (Screenshot: Christian Heilmann)
  • Als zu loggenden Inhalt verwenden wir window.innerWidth. (Screenshot: Christian Heilmann)
  • Konsole mit der Information, wie breit das Fenster war, als der Code der Seite ausgeführt wurde (Screenshot: Christian Heilmann)
  • Geschwungene Klammern um eine Variable herum bedeutet, dass der Name und der Wert der Variable ausgegeben wird. (Screenshot: Christian Heilmann)
Komplexe Anfrage in der Konsole mit anschließendem Kopieren in die Zwischenablage (Screenshot: Christian Heilmann)

Verschiedene Arten von Log-Nachrichten

Wer die Konsole im Web öffnet, bekommt meistens eine riesige Menge an Informationen. Entwickler scheinen es zu lieben, Information in der Konsole abzulegen, aber auch zu vergessen, sie vor dem Livestellen wieder herauszunehmen.

Daher ist es sinnvoll, sich mit den Möglichkeiten, diese Informationen zu filtern, bekannt zu machen. Man kann aber auch als Entwickler dazu beitragen, nur das Sinnvolle sichtbar zu machen, indem man seine Daten nicht nur als console.log() ausgibt, sondern auch die anderen Optionen nutzt:

  • console.info(Nachricht) für die Ausgabe von Zusatzinformationen
  • console.error(Nachricht) für Fehlermeldungen
  • console.warn(Nachricht) für Warnungen

Das bedeutet nicht nur, dass verschiedene Browser diese Meldungen unterschiedlich darstellen, sondern man erlaubt damit auch das Filtern der Ausgabe nach Schweregrad. Für komplexe Datenstrukturen gibt es zudem spezielle Methoden, die Daten einfacher verständlich darstellen.

  • console.table(Daten, [filter]) stellt die Daten als Tabelle dar, die man zum Beispiel in Excel kopieren kann. Mit einem zweiten Parameter kann man auch die Tabelle filtern.
  • console.dir(Daten) stellt die Daten in einer Baumstruktur dar.
  • console.dirxml(Daten) stellt die Daten in einer Baumstruktur dar und die Einzeldaten als XML/HTML.

Will man beispielsweise alle Hauptüberschriften in dem derzeitigen Dokument sehen, bekommt man je nachdem, welche Methode man nutzt, die Information anders dargestellt.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed
  • Anzeige einfacher Berechnungen und Autovervollständigung in der Konsole (Screenshot: Christian Heilmann)
  • Komplexe Anfrage in der Konsole mit anschließendem Kopieren in die Zwischenablage (Screenshot: Christian Heilmann)
  • Die gleiche Information auf verschiedene Art und Weise dargestellt (Screenshot: Christian Heilmann)
  • Beispiel der Darstellung eines Arrays als Gruppe von Logs in der Konsole (Screenshot: Christian Heilmann)
  • Alle Links auf Golem.de, die "video" beinhalten, als Tabelle in der Konsole (Screenshot: Christian Heilmann)
  • Einen Logpoint im Sources-Werkzeug setzen (Screenshot: Christian Heilmann)
  • Als zu loggenden Inhalt verwenden wir window.innerWidth. (Screenshot: Christian Heilmann)
  • Konsole mit der Information, wie breit das Fenster war, als der Code der Seite ausgeführt wurde (Screenshot: Christian Heilmann)
  • Geschwungene Klammern um eine Variable herum bedeutet, dass der Name und der Wert der Variable ausgegeben wird. (Screenshot: Christian Heilmann)
Die gleiche Information auf verschiedene Art und Weise dargestellt (Screenshot: Christian Heilmann)
Log-Nachrichten gruppieren 
  1. 1
  2. 2
  3. 3
  4.  


perryflynn 25. Aug 2022 / Themenstart

Man kann auch mit fetch() (siehe die mozilla developer network doku) blob:// URLs...

gorden 25. Aug 2022 / Themenstart

Wie gesagt wenn es so etwas gibt :)

stefan... 24. Aug 2022 / Themenstart

als ehemaliger FE Entwickler interessiert mich das.

yinyangkoi 24. Aug 2022 / Themenstart

Das mit dem copy($_) wusste ich nicht, habe immer manuell kopiert. Was blöd ist bei gro...

Kommentieren



Aktuell auf der Startseite von Golem.de
Superbase V
Zendures Solarstation mit 6.400 Wh kommt mit hohem Rabatt

Vor dem Verkaufsstart über die eigene Webseite verkauft Zendure seine Superbase V über Kickstarter - mit teilweise fast 50 Prozent Rabatt.

Superbase V: Zendures Solarstation mit 6.400 Wh kommt mit hohem Rabatt
Artikel
  1. Tesla Optimus: Elon Musk zeigt Roboter-Prototyp
    Tesla Optimus
    Elon Musk zeigt Roboter-Prototyp

    Roboter könnten für Tesla aus Sicht von Elon Musk bedeutender werden als Elektroautos. Der Konzern zeigte seinen ersten Roboter-Prototypen.

  2. Microsofts E-Mail: Modern Auth in Exchange macht Admins Arbeit
    Microsofts E-Mail
    Modern Auth in Exchange macht Admins Arbeit

    Ab dem 1. Oktober 2022 müssen Exchange-Clients zwingend Microsofts moderne Authentifizierung nutzen. Das bedeutet Mehrarbeit.
    Eine Analyse von Oliver Nickel

  3. Google: Nutzer fordern Bluetooth-Freigabe für Stadia-Controller
    Google
    Nutzer fordern Bluetooth-Freigabe für Stadia-Controller

    Mit der Einstellung von Stadia können auch Tausende der speziellen Controller ohne ein Update nicht mehr drahtlos genutzt werden.

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • MindStar (u. a. LC-Power LC-M27-QHD-240-C-K 389€) und Damn-Deals (u. a. Kingston A400 240/480 GB 17,50€/32€, NZXT Kraken X73 139€) • Alternate: Weekend Sale • Razer Strider XXL 33,90€ • JBL Live Pro+ 49€ • PCGH-Ratgeber-PC 3000 Radeon Edition 2.500€ • LG OLED65CS9LA 1.699€ [Werbung]
    •  /