Fehlersuche leicht gemacht

Teil 2: Debugging-Tools für Browser

27.4.2009 von Redaktion pcmagazin

ca. 3:20 Min
Ratgeber
  1. Debugging-Tools für Browser
  2. 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.

Debugging-Tools für Browser
Moderner als der Kommandozeilen-Javascript-Debugger kommt der Web Inspector daher.
© Archiv

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.

Debugging-Tools für Browser
Schnell Breakpoints setzen und Skripte Schritt für Schritt prüfen: Im IE 8 sind Entwickler-Tools schon eingebaut.
© Archiv

Ü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.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.