Fehlersuche leicht gemacht
Debugging-Tools für Browser
Debuggen gehört zur Software-Entwicklung wie die Verspätung zur Deutschen Bahn. Geniale Browser-Tools finden Fehler in HTML, CSS und Javascript.
- Debugging-Tools für Browser
- Teil 2: Debugging-Tools für Browser
Perfekter Code fließt niemandem aus den Fingern. Deshalb ist das Debuggen von Website-Code ein nötiges Übel. Und weil Webprojekte immer komplexer werden, nimmt auch der Anteil der Fehlersuche immer mehr Zeit in Anspruch. Doch wie findet man am effizientesten Fehler im Code?Klar sind Debugger im Umfang von Entwicklungsumgebungen wie Visual Studio, Eclipse oder Net Beans enthalten - doch es gibt noch eine andere Möglichkeit: Nutzen Sie doch Debugging-Tools direkt im Browser. Das ist praktisch, denn Sie können Fehlern genau dort auf die Schliche kommen, wo sie passieren, nämlich im Web-Browser.
Firebug 1.3
Die meisten Entwickler schwören auf das Firefox-Add-on Firebug. Taufrisch ist kurz vor Redaktionsschluss noch die Version 1.3 veröffentlicht worden.
Die Hauptneuheit: Das Netzwerkpanel wurde neu implementiert, sodass es Javascripts schneller laden kann. Erste Tests zeigen, dass das in der Praxis nicht immer schneller geht. Bei einigen Beispiel-Websites bremst der Javascript-Debugger immer noch merklich.
Nach dem Start dockt sich Firebug an den unteren Teil des Browser-Fensters an und bietet über Tabs die wichtigsten Funktionen. Jetzt muss der Nutzer wissen, was er machen will. Javascript debuggen, CSS analysieren, die HTML-Struktur prüfen, Quellcode anpassen und vieles mehr.
Firebug ist mächtig. Speziell, wer das Werkzeug zum ersten Mal nutzt, wird eine gewisse Einarbeitungszeit brauchen. Doch die Macher haben sich alle Mühe gegeben, den Debugger so intuitiv wie möglich zu halten.
Beispiel Javascript-Fehler: Das Tab Skripts hilft Entwicklern dabei, Javascript-Fehlern auf die Spur zu kommen. In der neuesten Firebug-Version ist das zwar aus Performance-Gründen ausgeschaltet, kann aber über zwei Mausklicks aktiviert werden.
Viele Standard-Dienste wie etwa Google Maps nutzen Javascript. Wenn dort etwas nicht so tut, wie es soll, kann man über den Debugger einfach Breakpoints per Mausklick setzen. Dazu müssen Sie einfach die entsprechende Zeilennummer anklicken, bei der das Skript beim späteren Durchlauf anhalten soll.
Dafür müssen Sie nur die Seite neu laden. Firebug hält jetzt am Breakpoint an und Sie können im rechten Teil des Fensters die Variablenwerte prüfen, den Stack-Inhalt ansehen und schrittweise weiter durch den Code wandern.
Doch Firebug kann noch viel mehr: Auch Fehler im HTML-Layout oder den Style-sheets kommt man mit Firebug viel leichter auf die Schliche. Und selbst wenn der Performance- Schuh drückt, kann man mit Firebug meist gegensteuern, zumindest kann man Schwachstellen im Code ausfindig machen.
Über das Tab Netzwerk können Nutzer hier genau nachverfolgen, welche Dateien der Webseite in welcher Reihenfolge vom Server geliefert werden und wie lange das dauert. Aber keine Angst, Firebug ist nicht nur was für Spezialisten.
Im Gegenteil, mit pfiffigen Funktionen erleichtert es auch den Einstieg in die Webprogrammierung. So zeigt der HTML-Viewer stets den aktuellen Zustand der Webseite an. Klicken Sie einfach ein Element im Browser an und schon zeigt Firebug die dazugehörigen Quellcode-Teile.
Einen guten Einstieg in Firebug bietet ein Tutorial. Interessant und vor allem unterhaltsam sind auch einige Youtube-Videos zum Thema, die etwa zeigen, wie man mit Firebug Stylesheets anpasst.
Der Debugger ist also nicht nur was für Entwickler, sondern kann auch Designern das Leben erleichtern. Praktisch: Mittlerweile gibt es zahlreiche Erweiterungen um Firebug weiter anzupassen, etwa Fire PHP, um auch PHP-Fehler im Browser zu debuggen.
Wer nicht mit Firefox arbeiten will, für den gibt es Firebug Lite, ein Debugging-Werkzeug das auch im Internet Explorer, Safari und Opera funktioniert. Vom Funktionsumfang her ist diese abgespeckte Variante aber deutlich dünner als das Original, hier können andere Debugger mehr.
