<webdevFulda />

JavaScript & DOM Debugging


von

Mario Fink

Es war ein Mal…

ALARM!!! ALARM!!!

JavaScript Debugging sah in
grauer Vorzeit oftmals so aus:

for (var i = 0; i < c-2; i++) {
    var next = fibo[fibo.length-2] + fibo[fibo.length-1];
    alert(next);
    fibo.push(next);
}

* Vorher die JavaScript-Konsole öffnen (Strg+Alt i/Cmd+Alt i)

Und dann kam: Firebug

Firebug Logo

Die Firefox-Erweiterung von Joe Hewitt erleichterte den Alltag des gemeinen Webentwicklers erheblich.

Sie führte die erste benutzbare JavaScript-Konsole ein.

Konsolenspiele

console.log("Ich bin ein Logeintrag.");
console.info("Sehr informativ.", this);
console.warn("Obacht!", window);
console.error("Hoppla!");
					

* Vorher die JavaScript-Konsole öffnen (Strg+Alt i/Cmd+Alt i)

function fibonacci(c) {
    if (c < 1) return;
    var fibo = [1,1];
    console.group("Fibonacci numbers");
    for (var i = 0; i < c-2; i++) {
        var next = fibo[fibo.length-2] + fibo[fibo.length-1];
        console.log(fibo[fibo.length-1], next);
        fibo.push(next);
    }
    console.groupEnd();
    return fibo;
}

* Vorher die JavaScript-Konsole öffnen (Strg+Alt i/Cmd+Alt i)

Browseruntertstützung

Die grundlegenden Konsolenbefehle werden von den meisten aktuellen Browsern unterstützt:

  • Internet Explorer 9
  • Firefox
  • Chrome
  • Safari
  • Opera

Für Notfälle:

if (!window.console || !console.firebug) {
    var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
    window.console = {};
    for (var i = 0; i < names.length; ++i)
        window.console[names[i]] = function() {}
}
					

Da Konsolenaufrufe in nicht-unterstützten Browsern zu Fehlern führen würden, erstellt FirebugX für sämtliche Konsolenmethoden Dummyfunktionen.

Debugging

  • debugger;
  • (Conditional) Breakpoints
  • DOM Breakpoints

Schritt-für-Schritt

function fibonacci(c) {
    if (c < 1) return;
    var fibo = [1,1];
    for (var i = 0; i < c-2; i++) {
        debugger;
        var next = fibo[fibo.length-2] + fibo[fibo.length-1];
        fibo.push(next);
    }
    return fibo;
}

* Vorher die JavaScript-Konsole öffnen (Strg+Alt i/Cmd+Alt i)

(Conditional) Breakpoints


siehe: Chrome Developer Tools: Breakpoints

* Vorher die JavaScript-Konsole öffnen (Strg+Alt i/Cmd+Alt i)

DOM Breakpoints


I'm a box!

siehe: Breakpoints on DOM Mutation Events

* Vorher die JavaScript-Konsole öffnen (Strg+Alt i/Cmd+Alt i)

DOM-Inspektor &

Live CSS Editor


Bonuspunkte

  • Element untersuchen — $0
  • JavaScript Pretty-Printer
  • Remote Debugging
  • Firefox Entwickler Werkzeuge

Fragen?

Mario Fink

Präsentation erstellt mit reveal.js