Debugging-Techniken im Browser

 (alan.norbauer.com)
5 Punkte von GN⁺ 2023-11-12 | 1 Kommentare | Auf WhatsApp teilen

Tipps zur Nutzung des Browser-Debuggers

  • Erweiterte bedingte Breakpoints

    • Erweiterung der Möglichkeiten bedingter Breakpoints durch Ausdrücke mit Nebenwirkungen
    • Mit Logpoints/Tracepoints lassen sich Logs in der Konsole ausgeben, ohne die Ausführung anzuhalten
    • Mit console.count die Anzahl der Ausführungen zählen
    • Wichtige Browser unterstützen Logpoints/Tracepoints (Stand: Mai 2020)

  • Watch-Fenster nutzen

    • Im Watch-Fenster kann console.log verwendet werden
    • Um Ausdrücke beim Zeitpunkt von DOM-Änderungen auszuführen, einen DOM-Änderungs-Breakpoint setzen und anschließend einen Watch-Ausdruck hinzufügen

  • Call Stack verfolgen

    • Den Call Stack von Funktionsaufrufen verfolgen, um nicht übereinstimmende Aufrufe zu finden
    • console.trace in bedingten Breakpoints verwenden, um den Call Stack zu prüfen

  • Programmverhalten ändern

    • Das Verhalten eines Programms kann direkt im Browser spontan verändert werden
    • Funktionsparameter überschreiben, um das Verhalten anzupassen

  • Einfaches Performance-Profiling

    • Mit der Console-Timing-API die Ausführungszeit von Code messen
    • Zeitmessung mit console.time('label') und console.timeEnd('label')

  • Funktions-Arität nutzen

    • Breakpoints nur aktivieren, wenn mit einer bestimmten Anzahl von Argumenten aufgerufen wird
    • Nützlich, um Abweichungen bei der Anzahl von Argumenten in Funktionsaufrufen zu finden

  • Zeit nutzen

    • Breakpoints erst aktivieren, nachdem seit dem Laden der Seite eine bestimmte Zeit vergangen ist
    • Breakpoints für einen bestimmten Zeitraum überspringen und erst danach aktivieren

  • CSS nutzen

    • Breakpoints auf Basis berechneter CSS-Werte aktivieren

  • Nur bei geraden Aufrufen anhalten

    • Breakpoints nur bei jeder geraden Ausführung aktivieren

  • Anhalten per Sampling

    • Breakpoints nur für zufällige Stichproben der Ausführung aktivieren

  • An einer bestimmten Zeile nicht anhalten

    • Mit der Option "Never Pause Here" verhindern, dass an einer bestimmten Zeile angehalten wird

  • Automatische Vergabe von Instanz-IDs

    • Jeder Klasseninstanz automatisch eine eindeutige ID zuweisen

  • Programmgesteuertes Umschalten

    • Bedingte Breakpoints programmgesteuert mit einem globalen Boolean umschalten

  • monitor() für Klassenaufrufe

    • Zum Verfolgen von Methodenaufrufen einer Klasse den Chrome-Befehl monitor verwenden

  • Funktionsaufrufe und Debugging

    • Eine Funktion nach dem Aufruf von debugger in der Konsole zum Debuggen ausführen

  • Bei URL-Änderungen die Ausführung anhalten

    • In Single-Page-Anwendungen die Ausführung vor einer URL-Änderung anhalten

  • Debugging von Property-Zugriffen

    • Einen Breakpoint aktivieren, sobald eine Property eines Objekts gelesen wird

  • copy() verwenden

    • Mit der Console-API copy() Informationen direkt aus dem Browser in die Zwischenablage kopieren

  • HTML/CSS-Debugging

    • Mit der JS-Konsole HTML/CSS-Probleme diagnostizieren
    • DOM untersuchen, wenn JS deaktiviert ist
    • DOM-Elemente untersuchen, die nur unter bestimmten Bedingungen erscheinen
    • DOM-Snapshots aufzeichnen
    • Fokussierte Elemente überwachen
    • Elemente mit fetter Schrift finden
    • Auf das aktuell ausgewählte Element referenzieren
    • Events überwachen

Meinung von GN⁺

Der wichtigste Punkt dieses Artikels ist, dass er verschiedene Techniken und Tipps vermittelt, mit denen Entwickler mithilfe des Browser-Debuggers ihren Code effizienter debuggen und Probleme lösen können. Diese Informationen sind für Softwareentwickler sehr nützlich und besonders interessant, weil sie beim Verfolgen komplexer Bugs oder beim Lösen von Performance-Problemen Zeit sparen können.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-11-12
Hacker-News-Kommentare

  • Die Weiterentwicklung der integrierten Debugging-Tools im Browser

    • Die in Browser integrierten Debugging-Tools haben sich in den vergangenen Jahrzehnten enorm weiterentwickelt.
    • Als jemand mit JavaScript-Erfahrung danke ich allen, die intuitives Debugging von Browser-Code möglich gemacht haben.
    • Bei Backend-Entwicklung oder der Arbeit mit anderen Sprachen vermisse ich das Debugging-Tool-Ökosystem moderner Browser.

  • Einsatz der debugger;-Anweisung

    • Die Verwendung der debugger;-Anweisung ist die einzige Möglichkeit, den rekursiven Stack des Chrome-Debuggers zu schlagen.
    • Erwähnt wird ein Fall, in dem Debugging-Fallen eingesetzt wurden, um Besucher einer Website daran zu hindern, die obfuskierte Homepage zu analysieren.

  • Schwierigkeiten beim Debuggen von NodeJS-Backends

    • Als Python-/Elixir-Programmierer nutze ich häufig pdb.set_trace()/IEx.pry().
    • Ich habe ein komplexes NodeJS-Backend übernommen und kämpfe ohne geeignete Debugging-Tools bei der Arbeit daran.
    • Ich musste wieder zu console.log-Debugging zurückkehren, was sich sehr primitiv anfühlt.
    • Es überrascht mich, dass es kein ordentliches Debugging-REPL gibt, und ich bitte um Hilfe.

  • Empfehlung für Werkzeug

    • Für die Backend-Entwicklung mit Django wird der Einsatz von Werkzeug empfohlen.
    • Bei jeder Ausnahme kann man dadurch im Browser eine "PDB"-Shell verwenden.

  • Zugriff auf lokale Variablen in IIFEs

    • Es wird gefragt, wie man auf lokale Variablen einer Immediately Invoked Function Expression (IIFE) zugreifen kann.
    • Gesucht wird eine Möglichkeit, dies zu tun, ohne dass der Debugger den Code innerhalb des IIFE-Scope anhalten muss.

  • Debugging über UI-Strings

    • Im Netzwerk-Panel zuerst die Aufzeichnung der Netzwerkanfragen starten.
    • In der linken Seitenleiste die Suche verwenden und den gesuchten Code-/UI-String eingeben.
    • Das Ergebnis in einer gebündelten JS-Chunk-Datei finden, in "Sources" öffnen und eine debugger;-Anweisung setzen.

  • Debugging mit bedingten Breakpoints

    • Es wird gefragt, wie man {configOption: true} in {get configOption() { debugger; return true; }} umwandeln kann.

  • Chrome-exklusive Funktion "Monitor Events for Element"

    • Die Funktion "Monitor Events for Element" wird erwähnt, ebenso dass sie exklusiv für Chrome ist.
    • Es wird gefragt, ob es eine Alternative für Firefox gibt.

  • Fehlen der queryObjects-API

    • Erwähnt wird die queryObjects-API, die eine Liste aller mit einem bestimmten Konstruktor erstellten Objekte zurückgibt.
    • Zum Beispiel kann man mit queryObjects(Function) eine Liste aller Funktionen im Heap erhalten.

  • Schwierigkeiten bei der Nutzung von Watch-Variablen

    • Es fällt schwer, Watch-Variablen zum Laufen zu bringen.
    • Ich nehme an, dass nur globale Variablen beobachtet werden können, aber da es nicht wie erwartet funktioniert, fülle ich das Log stattdessen mit Werten.
    • Es wird angemerkt, dass die Konsole eine Data.gui-artige UI hinzufügen sollte, mit der sich Variablen und Einstellungswerte ansehen und testen lassen, zusammen mit einem entsprechenden CodePen-Link.