Firebug - JavaScripts debuggen und testen |
|
Montag, 15. September 2008
|
||||
Firebug ist eine Erweiterung für Mozilla Firefox, die es erlaubt die Website und JavaScripts auf Herz und Nieren zu testen. Hier erfahrt Ihr mehr darüber.
 Kein seriöser Webentwickler/-designer kommt um die Erweiterung Firebug herum. Sie ermöglicht es Websites ausgibig zu testen. Dabei wird aber nicht der Quellcode der Website als Grundlage genommen sondern das was der Browser daraus interpretiert (DOM = Document Object Model). Das Hauptfenster von Firebug zeigt links den interpretierten Quellcode der Website und rechts die CSS-Definitionen des links markierten Objektes an. Dadurch das der Quellcode interpretiert angezeigt wird, sieht er immer gleich aus, egal wie der Webdesigner den Code selbst geschrieben hat. Abstände, Verschachtelungen, etc. sind immer gleich - sogar wenn der Webdesigner versucht hat den Quellcode durch Entfernen von Zeilenumbrüchen und Tabs unleserlich zu machen.  Über dem Quellcode sind zwei Schaltflächen zu erkennen. Untersuchen und Bearbeiten. Klickt man auf Untersuchen kann man mit der Maus über ein Element auf der Website gehen und springt direkt zum entsprechenden Quellcode innerhalb von Firebug. Das ist sehr praktisch - vor allem für HTML-Anfänger, die gerne wissen möchten wie ein bestimmtes Element auf der Website umgesetzt worden ist. Über die Schaltflächte "Bearbeiten" kann der Quellcode innerhalb von Firebug direkt geändert werden. Die Änderungen wirken sich dann sofort in Firefox aus, jedoch nur solange bis man die Seite neu lädt. Es gibt keine Möglichkeit diese Änderungen über Firebug direkt, permanent zu machen (so das jeder Besucher der Website die Änderungen sehen kann). Die Bearbeiten-Funktion dient lediglich zum Testen auf dem eigenen Rechner. So können CSS-Eigenschaften oder Elemente schnell verändert werden um zu sehen wie es aussehen würde, ohne immer eine Datei über FTP herunterzuladen, zu verändern und wieder hoch zu laden. X-Path Rechts neben diesen beiden Schaltflächen gibt es den sogenannten X-Path. Alle Elemente befinden sich ja in Relation zueinander. Über diese Relationen funktioniert auch die CSS-Vererbung. Über den X-Path sehen wir also wo sich das aktuell markierte Element innerhalb der Seitenstruktur befindet. In dem Beispiel oben haben wir das DIV mit der ID "logo" markiert. Darin befindet sich noch ein Link (a) in dem sich wiederum ein Bild (img) befindet. Innerhalb von CSS können wir jetzt exakt dieses eine Bild ansprechen in dem wir zum Beispiel sagen: #logo a img { So bekommt jedes Bild, dass sich in einem Link befindet und in einem Objekt liegt, dass die ID "logo" hat, einen roten Rand.  CSS-AnsichtEin ebenfalls extrem nützliches Tool befindet sich im rechten Teil von Firebug. Wir sehen die CSS-Definitionen vom aktuell markierten Element. Wenn wir bei dem oberen Beispiel bleiben, in dem das DIV mit der ID "logo" markiert war, sehen wir jetzt auf der Grafik rechts, alle Style-Definitionen, die wir zugewiesen haben. Schön innerhalb dieser Ansicht ist, dass wir auch die Vererbung nachvollziehen können. Der ID "logo" geben wir nur drei Eigenschaften. Margin, Text-Align und eine Breite. Trotzdem wird der Text innerhalb der ID "logo" dunkelgrau, 12 Pixel groß und Arial sein. Der Grund dafür ist, dass wir genau diese Definitionen dem Body zugewiesen haben und sich diese Eigenschaften auf alle Elemente darunter vererben, sofern wir nichts Gegenteiliges definieren. Im Body ist der text-align:center durchgestrichen. Das liegt daran, dass wir genau diese Eigenschaft überschreiben in dem wir dem #logo ein text-align:right gegeben haben. Wir sehen also auf einen Blick, wo wir den Prozess der Vererbung innerhalb von CSS unterbrechen. Mit einem Klick vor eine Eigenschaft können wir diese auch kurzzeitig ausblenden - ähnlich wie oben beim HTML-Code und dem "Bearbeiten"-Knopf - und sehen wir es sich auf das Design auswirkt. Wir können auch in die Eigenschaften hinein klicken und diese nach unseren eigenen Wünschen ändern oder neue Attribute (Eigenschaften) hinzufügen. Wenn mehrere CSS-Dateien im Einsatz sind sehen wir ebenfalls die Herkunft unserer CSS-Definition. Neu in einer der letzten Versionen von Firebug ist hinzugekommen, dass wir nicht nur unsere eigenen Definitionen sehen können, sondern auch die vom Browser. Ein DIV wird standardmäßig immer mit display:block ausgestattet und genau das sehen wir jetzt innerhalb von Firebug auch. Wie der Browser die verschiedenen Elemente aussehen lässt, falls wir nichts daran ändern. Würden wir jetzt dem DIV-Element sagen, dass es display:inline haben soll, wäre die entsprechende Passage innerhalb der html.css durchgestrichen, da wir sozusagen die Standarddarstellung des Browsers damit überschreiben. JavaScript Konsole Ein weiteres schönes Feature ist die JavaScript Konsole innerhalb von Firebug. Sie zeigt uns JavaScript-Fehler an und ermöglicht es uns Debug-Informationen abzubilden. Verwendet man innerhalb eines JavaScript Projektes den Befehl console.log("Das steht in Variable > test <: " + test); kann man sich aktuelle Variablen damit ausgeben. Vorher hat man oft den Alert-Befehl dafür missbraucht, was dann auch gerne mal dazu geführt hat, dass in einer Schleife die Alert-Box sich entsprechend oft geöffnet hat. So kann man sehr viel eleganter seine JavaScripts testen. Aber Achtung! Diesen Befehl kennt der Internet Explorer bis einschließlich Version 7 nicht. Sollte man also in einem Produktivsystem unterwegs sein, muss man damit rechnen, dass die Besucher JavaScript-Fehler erhalten, wenn man gerade an dem System arbeitet. Netzwerk Zu guter Letzt möchte ich noch ein schönes, kleines Feature zeigen, dass in Zeiten von DSL 16.000 fast schon überflüssig, jedoch trotzdem recht informativ ist. Die Rede ist von einer Ladezeiten-Ansicht:  Wir sehen alle Elemente, die sich auf unserer Seite befinden und eingebunden wurden. Egal ob intern oder extern. Bilder, Stylesheets, JavaScript-Dateien oder auch externe Tracker wie Google Analytics werden darüber sichtbar gemacht. Pro Datei sehen wir, auf einen Blick die Art wie die Datei eingebunden wurde (GET oder POST), welche Servermeldung zurück kam (z.B. 200 OK), welche Domain die eingebundene Datei hat, wie groß diese ist und die Ladezeit. Schön ist, dass wir so auf einen Blick sehen können wie sich die Gesamtladezeit unserer Website zusammensetzt. Fazit Firebug ist ein sehr Mächtiges Instrument um das eigentlich kein Webdesigner vorbei kommt. Im Internet Explorer 8 wird es zwar vergleichbare Tools geben, doch in wie fern sie an das Original herankommen bleibt abzuwarten. Firebug selbst überzeugt nicht nur durch die Vielfalt der ganzen Informationen die übersichtlich aufbereitet werden, sondern auch durch die Handhabung. Geht man zum Beispiel mit der Maus über ein Bild innerhalb des Quellcodes (Beispiel: src="bild1.jpg") wird das Bild als Thumbnail angezeigt. Das Gleiche wenn man über einen Farbwert mit der Maus fährt. Das sind raffinierte Kleinigkeiten, die das Arbeiten mit Firebug ungemein vereinfachen. Anfänger im Bereich Webdesign werden mit der Fülle an Informationen sicherlich leicht überfordert sein - wenn man sich aber genug Zeit gibt und die Features in Firebug lange genug studiert, wird man feststellen, dass man ohne Firebug nicht mehr webdesignen möchte. Links Firebug für Firefox herunterladen
|
||||
| Letzte Aktualisierung ( Dienstag, 16. September 2008 ) | ||||
Keine Kommentare vorhanden
| < Zurück | Weiter > |
|---|
