Logpoints in fremdem Code setzen

Der Erfolg von console.log() zeigt, dass Entwickler in ihren Code gerne eine Zeile eingeben, um Informationen zu erhalten, was passiert. Wäre es nicht auch praktisch, das in fremdem Code zu tun? Dafür gibt es im Sources-Werkzeug die Option, Logpoints zu erstellen.

Stellenmarkt
  1. SAP Job - SAP BW / 4HANA Berater (m/w/x)
    über duerenhoff GmbH, München
  2. (Junior) IT Business Partner / Demand Manager - Sales Units (m/w/d)
    Jungheinrich AG, Hamburg
Detailsuche

Bei geöffnetem Skript kann man per Rechtsklick mit der Maus Breakpoints setzen, eine der Optionen ist ein Logpoint.

  • 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)
Einen Logpoint im Sources-Werkzeug setzen (Screenshot: Christian Heilmann)

Man wird dann gefragt, welchen Javascript-Ausdruck man ausgeben will, in diesem Fall die innere Breite des Fensters.

Wenn man jetzt die Seite neu lädt, wird in der Konsole diese Information ausgegeben, obwohl wir den Code der Seite nicht geändert haben.

  • 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)
Als zu loggenden Inhalt verwenden wir window.innerWidth. (Screenshot: Christian Heilmann)

Weiterführende Informationen

Golem Karrierewelt
  1. DP-203 Data Engineering on Microsoft Azure: virtueller Vier-Tage-Workshop
    24.-27.10.2022, virtuell
  2. Adobe Premiere Pro Aufbaukurs: virtueller Zwei-Tage-Workshop
    17./18.10.2022, Virtuell
Weitere IT-Trainings

Die Konsole ist ein sehr mächtiges Werkzeug für Webentwickler und es lohnt sich, mehr darüber zu wissen, als nur mit console.log() Daten auszugeben. Es ist praktisch, dass die Funktionalität der Konsole standardisiert ist, also bei allen Browser-Entwicklerwerkzeugen gleich funktioniert.

Für Informationen über die Konsole ist die offizielle Dokumentation im Microsoft-Edge-Browser die neueste und detaillierteste Quelle. Unter anderem gibt es dort eine API-Referenz und eine Auflistung aller Hilfsmethoden. Man kann natürlich auch console. in die Konsole eingeben und so erfahren, was es alles gibt.

Zum Schluss noch ein letzter Tipp, der viel Verwirrung verhindern kann: Normalerweise nutzt man console.log(x), um den Wert der Variable x auszugeben. Das kann problematisch werden, wenn man das mit vielen Variablen macht, da man eine Menge Werte erhält, aber nicht den Namen der Variablen. Der einfachste Trick, das zu umgehen, ist, Variablen immer in geschwungenen Klammern der Konsole zu übergeben.

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)
Geschwungene Klammern um eine Variable herum bedeutet, dass der Name und der Wert der Variable ausgegeben wird. (Screenshot: Christian Heilmann)
 Log-Nachrichten gruppieren
  1.  
  2. 1
  3. 2
  4. 3


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. Elektromobilität: Superschnelles Laden mit zwölf Megawatt
    Elektromobilität
    Superschnelles Laden mit zwölf Megawatt

    Das Unternehmen Paxos hat ein Hochleistungsladegerät mit Spezialstecker entwickelt. Der Industrie genügt eine weit geringere Leistung, aber autonome Fahrzeuge könnten das ändern.

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]
    •  /