JavaScript - Fehlersuche - Firebug

1. Die Abschnitte

• Überblick
• Tools
• Firebug
• Ausgaben an der Konsole Teil 1
• Ausgaben an der Konsole Teil 2
• Feintuning der Konsole
• Debugging zur Laufzeit Teil 1
• Debugging zur Laufzeit Teil 2

2. Starten

Wenn man sich das Addon installiert hat, so erscheint rechts unten in der Statusleiste dieser kleiner grauer Käfer . Das bedeutet, dass Firebug für die aktuelle Seite im Browser nicht aktiv ist. Um das Teil nun scharf zu schalten, gibt es zwei Möglichkeiten. Entweder darauf klicken (für die Mausschubser) oder auf "F12" hauen (für die Coder). Dann verändert sich das Symbol zu und das Teil ist aktiv. Das könnt ihr dann sehr schnell an dem Menü im unteren Bereich des Browsers sehen.

Die Konsole

... ist was JavaScript(!) angeht, erst mal das Einzige, was uns interessiert. Denn dort erscheinen die Fehlermeldungen vom Parser. Oder auch eigene Ausgaben, wenn man es richtig macht.

3. Ein Beispiel

Das, was ich euch zuerst zeigen möchte, ist eigentlich ein ziemlicher Mäusefurz. Aber ich mache es mal anhand der Datei firebug_fehler.htm. Denn da haben wir ein Array auf PHP-Art erzeugt. Und das ist ja bekanntlicherweise in JavaScript so nicht möglich. Darum seht ihr auch sofort die Fehlermeldung, weil das obligatorische var arr = new Array(); fehlt.

arr['bla']     = 1;
arr['blubb']   = 2;
arr['blubber'] = 3;

Noch ein Beispiel

document.getElementById('bla').onclick = function()
{
  alert (this);
}

Wie ihr unschwer erkennen könnt, gibt es in der HTML-Datei kein Element mit der ID bla. Und darum haut euch Firebug auch hier den entsprechenden Hinweis um die Ohren.

4. Fehlermeldungen

Davon gibt es eine ganze Menge. In den meisten Fällen hilft Google weiter. Ich stelle hier exemplarisch erst mal nur drei vor. Den Rest werdet ihr im Laufe der Zeit selber kennen lernen.

• syntax error ist ja wohl selbsterklärend
• is null Element ist nicht vorhanden
• is undefined Objekt oder Variable ist nicht vorhanden

weiter zum nächsten Abschnitt