Log-Nachrichten gruppieren

Falls man viel Information in der Konsole darstellen will, gibt es auch die Option, sie mittels console.groupStart(name) und console.groupEnd(name) in ein- und ausblendbare Gruppen zu sortieren. Verwendet man groupCollapsed(name), sind sie automatisch ausgeblendet, bis man sie analysieren will.

  • 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)
Beispiel der Darstellung eines Arrays als Gruppe von Logs in der Konsole (Screenshot: Christian Heilmann)

Javascript-Helfer

Stellenmarkt
  1. Automation Engineer (m/w/d)
    Packsize GmbH, deutschlandweit (Home-Office)
  2. SAP Consultant (m/w/d) FI/CO/PS
    Universitätsklinikum Regensburg, Regensburg
Detailsuche

Untersucht man sein Javascript auf Fehler, passiert es oft, dass man eine Menge Code schreibt, nur um die richtigen Informationen als Log in der Konsole anzuzeigen. Alternativ gibt es dafür auch native Methoden.

  • Ein if(x < 30) {console.log('kleiner')} kann man durch console.assert(x < 30,{x,fehler:'kleiner'}) ersetzen. Das wirkt auf den ersten Blick komplexer, hat aber den Vorteil, dass ein Fehler ausgegeben wird und man nur den assert löschen muss, wenn man das Problem behoben hat.
  • Die console.count(Name)-Methode erlaubt es, einen Zähler auszugeben, zum Beispiel wenn man wissen will, wie oft eine Funktion aufgerufen wurde, ohne eine neue Variable zu erstellen. Man kann den Zähler dann auch per console.countReset(Name) auf 0 zurücksetzen.
  • Mit console.time(Name) und console.timeEnd(Name) kann man die Leistung des eigenen Codes kontrollieren, indem man anzeigt, wie lange er gebraucht hat, um ausgeführt zu werden.
  • Mittels monitor(funktion) kann man automatisch informiert werden, wenn eine bestimmte Funktion aufgerufen wird. Mit unmonitor(funktion) beendet man den Report.

Interaktion mit dem Dokument im Browser

Die Konsole ist nicht nur dazu da, Informationen auszugeben, man kann damit auch auf den Browser und das aktuell dort dargestellte Dokument zugreifen. Dafür bietet die Konsole zusätzlich zu den nativen Javascript-Funktionen auch einige Extras an.

Golem Karrierewelt
  1. Angular für Einsteiger: virtueller Zwei-Tage-Workshop
    19./20.12.2022, Virtuell
  2. Green IT: Praxisratgeber zur nachhaltigen IT-Nutzung (virtueller Ein-Tages-Workshop)
    26.10.2022, virtuell
Weitere IT-Trainings

  • $() und $$() sind kurze Versionen von document.querySelector() und document.querySelectorAll(). Man kann also zum Beispiel mit $$('a') alle Verlinkungen in der aktuell dargestellten Seite abgreifen oder mit $('body').style.background = 'green' die Hintergrundfarbe zu Grün ändern.
  • Mit getEventListeners(Element) kann man herausfinden, auf welche Interaktionen das Element reagiert, zum Beispiel getEventListeners($('body')).
  • monitorEvents(Element, events) loggt automatisch, wenn eine Interaktion auf dem Element erfolgt, zum Beispiel loggt monitorEvents(window, ['resize', 'scroll']) jedes Mal, wenn die Größe des Fensters verändert wird oder man scrollt. unmonitorEvents(window, ['resize', 'scroll']) beendet den Report.

Sehr praktisch ist, dass die $$()-Methode ein Array als Ergebnis hat, was bedeutet, dass man die Ergebnisse auch filtern kann. Wer zum Beispiel alle Verlinkungen in der Golem.de-Seite haben möchte, die "video" beinhalten, kann das mittels der Array.filter()-Methode erreichen. In diesem Beispiel kann man auch sehen, dass mehrzeilige Eingaben in der Konsole möglich sind.

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)
Alle Links auf Golem.de, die "video" beinhalten, als Tabelle in der Konsole (Screenshot: Christian Heilmann)
 Tipps für die Browser-Konsole: Viel mehr als nur ein LogLogpoints in fremdem Code setzen 
  1.  
  2. 1
  3. 2
  4. 3
  5.  


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
Cloudgaming
Google Stadia scheiterte nur an sich selbst

Die Technik war nicht das Problem von Alphabets ambitioniertem Cloudgaming-Dienst. Das Problem liegt bei Google. Ein Nachruf.
Eine Analyse von Daniel Ziegener

Cloudgaming: Google Stadia scheiterte nur an sich selbst
Artikel
  1. Tiktok-Video: Witz über große Brüste kostet Apple-Manager den Job
    Tiktok-Video
    Witz über große Brüste kostet Apple-Manager den Job

    Er befummle von Berufs wegen großbrüstige Frauen, hatte ein Apple Vice President bei Tiktok gewitzelt. Das kostete ihn den Job.

  2. Copilot, Java, RISC-V, Javascript, Tor: KI macht produktiver und Rust gewinnt wichtige Unterstützer
    Copilot, Java, RISC-V, Javascript, Tor
    KI macht produktiver und Rust gewinnt wichtige Unterstützer

    Dev-Update Die Diskussion um die kommerzielle Verwertbarkeit von Open Source erreicht Akka und Apache Flink, OpenAI macht Spracherkennung, Facebook hilft Javascript-Enwicklern und Rust wird immer siegreicher.
    Von Sebastian Grüner

  3. Vantage Towers: 1&1 Mobilfunk gibt Vodafone die Schuld an spätem Start
    Vantage Towers
    1&1 Mobilfunk gibt Vodafone die Schuld an spätem Start

    Einige Wochen hat es gedauert, bis 1&1 Mobilfunk eine klare Schuldzuweisung gemacht hat. Doch Vantage Towers verteidigt seine Position im Gespräch mit Golem.de.

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 • LG OLED TV 2022 65" 120 Hz 1.799€ • ASRock Mainboard f. Ryzen 7000 319€ • MindStar (G.Skill DDR5-6000 32GB 299€, Mega Fastro SSD 2TB 135€) • Alternate (G.Skill DDR5-6000 32GB 219,90€) • Xbox Series S + FIFA 23 259€ • PCGH-Ratgeber-PC 3000€ Radeon Edition 2.500€ [Werbung]
    •  /