Teil 2: Debugging-Tools für Browser

Web Developer Toolbar

Neben Firebug ist die Web Developer Toolbar für Firefox das zweite Must-Have für Entwickler. Wie der Name bereits verrät, hängt sich die Werkzeugleiste unter das Firefox-Menü. Aktuell ist die Version 1.1.6. Eine der Hauptaufgaben ist es auch hier, Fehlern auf die Spur zu kommen. Da ist es vor allem bei komplexeren Sites nützlich, dass Entwickler über den Disable-Button bestimmte Funktionen auf der Webseite gezielt ausschalten können, etwa Javascript, Farben oder die Referrer.

Wer hat nicht schon mal viel Zeit damit verschwendet, einen Fehler zu suchen, der gar nicht da war, nur weil die Webseite noch mit veralteten Daten aus dem Cache gearbeitet hat? Eines der coolsten Features beherbergt der Menüpunkt CSS. Klicken Sie auf Edit CSS und schon können Sie die Stylesheets einer Webseite live bearbeiten. Alle gemachten Änderungen werden sofort sichtbar. Schnell einmal Farben oder Schriftarten ändern, geht auf diese Weise wirklich schnell. Apropos CSS: Über Disable Styles können Entwickler auch per Mausklick alle Stylesheets vorübergehend abschalten.

Die Web Developer Toolbar vor allem auch zum Einarbeiten in ein bestehendes Projekt nützlich. So verrät der Menüpunkt Information Details über die Seitenstruktur, etwa über Links, Tabellen oder Metatags. Wer schnell prüfen will, wie die eigene Webseite auf einem Minidisplay dargestellt wird, der kann unter Miscellaneous schnell den Punkt Small Screen Rendering aktivieren oder über Resize mit verschiedenen Bildschirmauflösungen spielen.

Developer Toolbar für IE

Microsoft bietet für den Internet Explorer eine Developer Toolbar () an, die Entwickler kostenlos nachrüsten können. Was für den IE 6 und 7 noch als Browser-Plug-in nachgerüstet werden muss, kriegt man mit dem Internet Explorer 8 schon serviert.

Mit der Toolbar können Web-Designer und Entwickler die Dokumentenstruktur einer Website durchstöbern und Änderungen vornehmen. Praktisch: Über die Toolbar kann man zur besseren Übersicht Umrisse um Tabellen legen, ein Lineal einblenden sowie aktuelle HTML- und CSS-Einstellungen prüfen.

Wählen Sie unter Find unbedingt die Option Select Element by Click aus. Damit können Sie in der aktuellen Webseite ein Element anklicken und die Developer Toolbar zeigt die aktuellen Infos dazu an. Stylesheets, Popup-Blocker und Skripte schalten Sie gezielt über den Menüpunkt Disable aus.

Außerdem gut: Über Validate können Links, HTML-Code sowie Stylesheets auf Fehler geprüft werden. Die Toolbar kommt aber bei Weitem nicht an die Funktionsvielfalt von Firebug heran, das Firefox-Add-on bleibt erste Wahl.

Debugging mit Chrome

Noch recht jung im Browser-Geschäft ist Chrome. Und auch der eingebaute Debugger hat noch nicht die Eigenschaft benutzerfreundlich verdient. Da sich Entwickler wohl mit so einem interessanten Browser ohnehin auseinandersetzen, sollten sie auch den Debugger nicht links liegen lassen.

Vergessen Sie aber jeden Komfort der anderen hier vorgestellten Werkzeuge. Debugging mit Chrome heißt heute nämlich noch Befehle auf einer Kommandozeile eintippen. Am besten sehen Sie sich über den Shortcut CTRL+U den Quellcode der Seite an und starten dann den Debugger mit CTRL+SHIFT+L. Übrigens gibt es auch eine Javascript-Konsole (CTRL+SHIFT+J).

Mit dem Debugger kann man jetzt Breakpoints setzen, Scripts schrittweise ausführen und sich die Variablenwerte anzeigen lassen. Der Befehl help listet die genauen Befehls-parameter auf. Interessanter als der Skript-Debugger ist da schon der Web Inspector, den Sie über das Kontextmenü und den Befehl Element untersuchen starten und sich so die Struktur einer Webseite ansehen können.

Firefox first

Für Website-Debugging ist Firebug erste Wahl. Da Fehlerfreiheit auch im Internet Explorer ein Muss ist, sollte man entweder IETab () im Firefox nutzen oder der Web Developer Toolbar eine Chance geben.

Website-Debugging mit Chrome ist momentan noch nicht wirklich komfortabel möglich, laut Google reicht es aber aus, wenn die Sites in Safari richtig arbeiten, dann sollte auch alles in Chrome ohne Probleme laufen.

Debugging mit IE8

Eine gute Nachricht für Freunde des Internet Explorer: Der neue IE 8 bringt die Debugging Toolbar von Microsoft bereits mit. Für einfache Fehlersuche soll es so nicht mehr nötig sein, externe Tools wie Visual Studio zu starten.

Über die Tastenkombination SHIFT+F12 startet man das Tool, das sich dann in einem neuen Fenster öffnet. Los geht es mit einem Klick auf Debuggen starten.

Praktisch: Der Debugger läuft dann nur im aktuellen Tab, also in der gerade aktiven Browser-Instanz. Alle anderen Tabs, die im IE 8 unabhängige Instanzen sind, laufen nicht im Debug-Modus. Das schont die Rechenpower und produziert nicht unnötig Fehlermeldungen.

Läuft der Debugger, dann können Nutzer durch Mausklicks im Quellcode Breakpoints setzen. Davon ausgehend kann man schrittweise weiter durch den Code gehen. Praktisch: Mit nur einem Klick lassen sich der Befehls-Stack sowie die lokalen Variablen prüfen.