Browser DevTools: Effektives Debugging

Die Browser Developer Tools sind unverzichtbar für Webentwickler. Lernen Sie die wichtigsten Funktionen für JavaScript, CSS und Performance-Debugging.

DevTools öffnen

Console-Methoden

// Basis-Logging
console.log('Info');
console.warn('Warnung');
console.error('Fehler');
console.info('Information');

// Formatierung
console.log('%cStilisierter Text', 'color: blue; font-size: 20px;');
console.log('Name: %s, Alter: %d', 'Max', 30);

// Objekte und Arrays
const user = { name: 'Max', age: 30 };
console.log(user);           // Einfach
console.dir(user);           // Interaktiv
console.table([user, user]); // Als Tabelle

// Gruppierung
console.group('User Details');
console.log('Name:', user.name);
console.log('Alter:', user.age);
console.groupEnd();

// collapsed by default
console.groupCollapsed('Collapsed Group');
console.log('Versteckte Info');
console.groupEnd();

// Zeitmessung
console.time('Operation');
// ... Code ...
console.timeEnd('Operation');  // "Operation: 123.45ms"

// Zählen
function myFunc() {
    console.count('myFunc aufgerufen');
}
myFunc(); // "myFunc aufgerufen: 1"
myFunc(); // "myFunc aufgerufen: 2"

// Bedingtes Logging
console.assert(1 === 2, 'Das ist falsch!');  // Zeigt nur bei false

// Stack Trace
console.trace('Wo bin ich?');

// Objekt-Eigenschaften auflisten
console.log(Object.keys(user));
console.log(Object.entries(user));

Breakpoints setzen

// 1. Im Code: debugger Statement
function calculateTotal(items) {
    debugger;  // Hält hier an wenn DevTools offen
    return items.reduce((sum, item) => sum + item.price, 0);
}

// 2. In DevTools: Sources Panel
// - Zeile anklicken für Breakpoint
// - Rechtsklick für bedingte Breakpoints

// 3. Bedingte Breakpoints (im DevTools)
// Rechtsklick auf Breakpoint → "Edit breakpoint"
// z.B.: item.price > 100

// 4. Logpoints (kein Anhalten, nur Logging)
// Rechtsklick → "Add logpoint"
// z.B.: "Item:", item.name

Breakpoint-Typen

// In Chrome DevTools → Sources → Breakpoints Panel:

// 1. Line Breakpoints
//    Klick auf Zeilennummer

// 2. DOM Breakpoints (Elements Panel)
//    Rechtsklick auf Element → "Break on..."
//    - Subtree modifications
//    - Attribute modifications
//    - Node removal

// 3. XHR/Fetch Breakpoints
//    Sources → XHR/fetch Breakpoints
//    URL enthält: "api/users"

// 4. Event Listener Breakpoints
//    Sources → Event Listener Breakpoints
//    z.B. Mouse → click

// 5. Exception Breakpoints
//    Sources → Pause on exceptions (Icon)

Network Panel

// Wichtige Filter:
// - XHR: Nur AJAX/Fetch Requests
// - JS: Nur JavaScript-Dateien
// - CSS: Nur Stylesheets
// - Img: Nur Bilder
// - WS: WebSocket-Verbindungen

// Nützliche Spalten:
// - Status: HTTP Status Code
// - Type: Ressourcen-Typ
// - Size: Übertragene Größe
// - Time: Ladezeit
// - Waterfall: Zeitliche Darstellung

// Request Details:
// - Headers: Request/Response Header
// - Preview: Vorschau (JSON, Bilder)
// - Response: Rohe Antwort
// - Timing: Detaillierte Zeitmessung
// - Cookies: Gesendete/Empfangene Cookies

// Throttling simulieren:
// - Fast 3G, Slow 3G
// - Offline
// - Custom profiles

Elements Panel - CSS Debugging

// Computed Tab:
// - Alle berechneten Styles sehen
// - Box Model visualisiert
// - Welche Regel gewinnt?

// Styles Tab:
// - Styles live bearbeiten
// - Neue Regeln hinzufügen
// - Pseudo-Klassen togglen (:hover, :active, :focus)

// Farben:
// - Shift+Klick auf Farbwert: Formate wechseln (hex, rgb, hsl)
// - Farbpicker für visuelle Auswahl

// Box Model:
// - Doppelklick auf Werte zum Bearbeiten
// - margin, border, padding, content

// CSS Grid/Flexbox Overlay:
// - Badge neben Element zeigt Grid/Flex
// - Klick zeigt Overlay mit Linien

Performance Profiling

// Performance Panel:
// 1. Record starten (Ctrl+E)
// 2. Aktionen ausführen
// 3. Stop (Ctrl+E)

// Analyse:
// - Main: JavaScript-Ausführung
// - Network: Requests
// - Frames: FPS
// - Timings: Wichtige Metriken

// Performance API im Code:
performance.mark('start');
// ... Code ...
performance.mark('end');
performance.measure('Meine Operation', 'start', 'end');

const measures = performance.getEntriesByType('measure');
console.log(measures);

// Memory Panel:
// - Heap Snapshot: Speicherabbild
// - Allocation instrumentation: Live-Verfolgung
// - Allocation sampling: Sampling über Zeit

Application Panel

// Storage:
// - Local Storage: Schlüssel-Wert Paare
// - Session Storage: Pro Tab
// - IndexedDB: Datenbank
// - Cookies: Alle Cookies

// Cache:
// - Cache Storage: Service Worker Caches
// - Application Cache (veraltet)

// Service Workers:
// - Registrierte Worker
// - Offline-Modus simulieren
// - Push-Benachrichtigungen testen

// Manifest:
// - PWA Manifest anzeigen
// - Icons und Start-URL prüfen

Nützliche Console-Tricks

// $0 - Aktuell ausgewähltes Element im Elements Panel
$0.style.border = '2px solid red';

// $_ - Letzter ausgewerteter Ausdruck
2 + 2
$_ * 2  // 8

// $('selector') - Kurzform für querySelector
$('button.primary')

// $$('selector') - Alle Elemente (querySelectorAll als Array)
$$('div').forEach(el => console.log(el));

// copy() - In Zwischenablage kopieren
copy(JSON.stringify(myObject, null, 2));

// monitor() / unmonitor() - Funktionsaufrufe tracken
function test() { return 42; }
monitor(test);
test();  // "function test called"
unmonitor(test);

// monitorEvents() - Events auf Element tracken
monitorEvents($0, 'click');
// Klick auf Element zeigt Event-Details
unmonitorEvents($0);

// getEventListeners() - Alle Event Listener eines Elements
getEventListeners($0);

// keys() / values() - Objekt-Schlüssel/Werte
keys({a: 1, b: 2});   // ['a', 'b']
values({a: 1, b: 2}); // [1, 2]

Lighthouse Audit

// DevTools → Lighthouse Tab

// Kategorien:
// - Performance: Ladezeit, FCP, LCP, CLS
// - Accessibility: Barrierefreiheit
// - Best Practices: Sicherheit, APIs
// - SEO: Suchmaschinenoptimierung
// - PWA: Progressive Web App Kriterien

// Tipps:
// - Im Inkognito-Modus testen (keine Extensions)
// - Mobile simulieren für realistische Werte
// - Mehrere Tests für konsistente Ergebnisse

Weitere Informationen

• 🔄 JavaScript Event Loop
• ⚡ Web Performance
• 🐛 Debugging Strategien