Debugging: Fehler systematisch finden

Gutes Debugging ist eine erlernbare Fähigkeit. Lernen Sie systematische Strategien, um Bugs effizient zu finden.

Der Debugging-Prozess

1. Reproduzieren
   └→ Bug konsistent nachstellen

2. Isolieren
   └→ Bereich eingrenzen

3. Verstehen
   └→ Ursache identifizieren

4. Fixen
   └→ Lösung implementieren

5. Verifizieren
   └→ Fix testen + Regression verhindern

Strategie 1: Reproduzieren

# Fragen:
- Wann tritt der Bug auf?
- Bei welchem User/Account?
- Welcher Browser/OS?
- Welche Schritte führen zum Bug?

# Reproduktion dokumentieren
1. Einloggen als user@example.com
2. Navigieren zu /settings
3. "Theme" auf "Dark" ändern
4. Auf "Save" klicken
→ Erwartung: Einstellungen gespeichert
→ Tatsächlich: 500 Error

# Minimal Reproducible Example
Reduzieren auf kleinsten Code der Bug zeigt

Strategie 2: Binary Search

# Bug in großer Codebasis finden

# Git Bisect
git bisect start
git bisect bad              # Aktuell ist kaputt
git bisect good v1.2.0      # Diese Version war OK

# Git checkt automatisch Commits aus
# Testen, dann:
git bisect good  # oder
git bisect bad

# Nach ~7 Schritten bei 100 Commits: Verursacher gefunden
git bisect reset

# Im Code: Hälfte auskommentieren
function complexFunction() {
    // Teil 1
    // ...

    // console.log('Checkpoint 1');

    // Teil 2
    // ...
}
# Bug in Teil 1 oder 2? Weiter halbieren.

Strategie 3: Rubber Duck Debugging

# Erkläre den Code Zeile für Zeile
# (einem Kollegen oder einer Gummiente)

function calculateTotal(items) {
    let total = 0;                    // "Ich initialisiere total mit 0"
    for (let item of items) {         // "Ich iteriere über alle Items"
        total += item.price;          // "Ich addiere... moment, was wenn
    }                                 //  price undefined ist?!"
    return total;
}

# Oft findet man den Bug beim Erklären

Browser DevTools

# Console
console.log('Simple output');
console.table([{a: 1}, {a: 2}]);     // Als Tabelle
console.group('Group');              // Gruppieren
console.time('Timer');               // Performance
console.trace();                     // Stack trace

# Debugger
debugger;  // Hält hier an wenn DevTools offen

# Breakpoints in DevTools
- Line Breakpoints: Klick auf Zeilennummer
- Conditional: Rechtsklick → "Add conditional"
- DOM Breakpoints: Element → Break on...
- XHR/Fetch Breakpoints: Sources → XHR Breakpoints

# Watch Expressions
- Variables überwachen während Debugging

# Call Stack
- Zeigt wie man zur aktuellen Stelle kam

Node.js Debugging

# Mit Inspector
node --inspect app.js
# Dann Chrome: chrome://inspect

# Break beim Start
node --inspect-brk app.js

# VS Code: launch.json
{
    "type": "node",
    "request": "launch",
    "name": "Debug",
    "program": "${workspaceFolder}/app.js",
    "skipFiles": ["/**"]
}

# Environment-basiertes Logging
const debug = require('debug')('app:server');
debug('Server starting on port %d', port);

# Aktivieren mit:
DEBUG=app:* node app.js

PHP Debugging (Xdebug)

# php.ini
[xdebug]
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_port=9003

# VS Code: launch.json
{
    "type": "php",
    "request": "launch",
    "name": "Listen for Xdebug",
    "port": 9003
}

# Im Code
var_dump($variable);
print_r($array);
debug_backtrace();  // Stack trace

Häufige Bug-Patterns

// Off-by-One
for (let i = 0; i <= array.length; i++)  // <= statt <

// Null/Undefined
user.profile.name  // Was wenn profile null ist?
user?.profile?.name  // Optional Chaining

// Async Timing
let data;
fetchData().then(d => data = d);
console.log(data);  // undefined! (noch nicht geladen)

// Closure in Loop
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);  // 3, 3, 3
}
// Fix: let statt var

// Mutation
const config = { debug: true };
initModule(config);
console.log(config.debug);  // Vielleicht geändert!

// Vergleiche
"10" > "9"   // false! (String-Vergleich)
10 > 9       // true

Logging für Debugging

// Strukturiertes Debug-Logging
function processOrder(order) {
    const logger = require('./logger');

    logger.debug('Processing order', {
        orderId: order.id,
        items: order.items.length,
        total: order.total
    });

    try {
        // ... processing
    } catch (error) {
        logger.error('Order processing failed', {
            orderId: order.id,
            error: error.message,
            stack: error.stack
        });
        throw error;
    }
}

Network Debugging

# Browser: Network Tab
- Request/Response Headers
- Timing (DNS, Connect, TTFB)
- Response Body

# Command Line
curl -v https://api.example.com/users
curl -X POST -d '{"name":"test"}' -H "Content-Type: application/json" url

# Proxy (Charles, Fiddler)
- HTTPS Traffic inspizieren
- Requests modifizieren
- Throttling simulieren

Weitere Informationen

• 📝 Logging Best Practices
• 🔧 Error Handling
• 🧪 Testing-Strategien