Es sei an dieser Stelle schon mal angemerkt, dass der Internet Explorer für die Entwicklung von Webseiten vollkommen ungeeignet ist. Es gibt zwei Gründe dafür: Zahlreiche Bugs, in der CSS Darstellung machen es dem Entwickler schwer. Ein weiterer Punkt ist die mangelnde Unterstützung von guten Tools. Es gibt zwar für den IE mitlerweile auch einen Pseudo Firebug (IE Developer oder so ähnlich), aber leider reicht der Firebug nicht das Wasser. Daher für jeden Entwickler ein muss. Firefox (oder ein passendes Derivat wie zum Beispiel flock)

Firebug Übersicht

Der Firebug ist eine ziemlich ausgewachsene Debugging Umgebung für Firefox und Co. Dazu gehören:

• Javascript Debugger (welcher ein schrittweises durchlaufen des Codes erlaubt!)
• interaktiver HTML Explorer
• DOM Explorer
• CSS Explorer
• Netzwerkverindungsexplorer -> Dieser erlaubt einem die Ladezeiten von Grafiken, Scripts und AJAX Requests zu überwachen/debuggen.

Drupal Einsatz

Der Firebug unterstützt sowohl den Themer als auch den Modul Entwickler:

Themer: Besoners die CSS Ansicht ist extrem hilfreich. So kann ein Tag irgendwo im Source Code selektiert werden, worauf man eine Übersicht bekommt, was für CSS Befehle dahinter sind und ob diese unter Umständen von anderen Selektoren überschrieben werden. Im Weiteren ist sofort ersichtlich, wo (Zeile und Datei) sich der entsprechende Selektor befindet. Um das ganze noch abzurunden, können änderungen Probehalber gerade direkt im Firebug gemacht werden, so dass das Resultat direkt ersichtlich ist (natürlich muss es später noch in der richtigen Datei machen, aber bei Try & Error kann das doch einiges an Zeit ersparen). Falls ein Themer seine Ladezeiten optimieren will, so ist die "Net Ansicht" recht hilfreich. Diese gibt gute Übersicht, wie lange die entsprechende Teil der Seite zum Laden brauchen.

Entwickler: Für den Entwickler kommen neben dem CSS Inspektor vor allem die "Console", "HTML", "Script" und "Net" in Betracht, aber das sollte eigentlich jeder Entwickler kennen.

Fazit

Wie bereits oft erwähnt ist die Firebug Extension unterlässlich. Kleiner Tipp noch: Wird Firebug nicht verwendet kann dieser auch deaktiviert werden, ansonsten wird jede Seite von Firebug analysiert, was natürlich ein kleines Bisschen Rechenzeit in Anspruch nimmt. Einfach einen rechtslick auf das Firebug Symbol in der Ecke und rechts und dann auf "disable Firebug" klicken… Einfach dann nicht vergessen wieder einzuschalten.

Screenshots

Screenshot 1: Zeigt die Grundübersicht von Firebug mit den diversen Fenstern. Screenshot 2: Die Net Ansicht. Gibt Auskunft über die Ladezeiten von Einzelteilen der Seite. Hier kann eine weitere Feinauswahl vorgenommen werden: Nur Bilder, nur Scripte oder nur AJAX Requests. Screenshot 3: Die Scriptansicht. Mit einem Klick in den linken Rand, lassen sich Haltepunkte definieren. Wird die Seite jetzt nochmals neu geladen, so wird das Javascript an diesem Punkt angehalten. Über die Buttons (Play, Step Over, Step inside und Step return) kann jetzt das Script Zeile für Zeile durchgegangen werden. Auf der rechten Seite werden dann jeweils die Werte der entsprechenden Variablen angezeigt. -> Extrem nützlich für jeden Javascriptentwickler (ich würde soweit gehen und sagen, dass es ohne gar nicht geht 😉