Nützliche Werkzeuge/Firebug
Inhaltsverzeichnis |
[Bearbeiten] Beschreibung
Der Firebug ist ein mächtiges Werkzeug für Webentwickler, mit dem sich Fehler oder unerwünschte Effekte auf Webseiten schnell aufspüren und beheben lassen. Er bietet verschiedene Ansichten der Seitenstruktur. In einigen Ansichten lassen sich Änderungen durchführen, deren Auswirkungen unmittelbar in der Seite zu sehen sind.
[Bearbeiten] Hinweis
Die Änderungen sind natürlich nur temporär und beeinflussen lediglich die Anzeige der aktuellen Seite im Browser! Nach jedem Neuladen der Seite gehen alle Änderungen verloren. Wenn Änderungen dauerhaft übernommen werden sollen, müssen sie aus der entsprechenden Ansicht herauskopiert und in den Seitenquellcode oder das CSS eingesetzt werden.
[Bearbeiten] PHP-Code finden
Auch wenn es nicht das ist, was viele lesen möchten: Zum Aufspüren von PHP-Code, der eine bestimmte Ausgabe erzeugt, eignen sich Firebug und das Web Developer Tool nur bedingt. Das liegt ganz einfach daran, dass beide nur das sehen können, was vom Server an den Browser ausgeliefert wird. PHP wird auf dem Server ausgeführt und erzeugt eine darstellbare HTML-Seite. Aus welchem PHP-Code diese Seite erzeugt wurde, ist ihr nicht anzusehen. Für den Browser gibt es keinen Unterschied zwischen einer statischen und einer dynamischen Seite. Deshalb bleibt als einzige Möglichkeit ein Codestück zu finden die aufwendige Suche in mehreren Dateien. Am einfachsten ist es, wenn man über einen Editor verfügt, der in Dateien suchen kann. Als Suchbegriffe eignen sich eindeutige Passagen wie Klassennamen, die sonst nirgends im Code vorkommen, am besten. Und natürlich ist es sinnvoll, wenigstens eine Idee zu haben, welcher Bereich für die Ausgabe verantwortlich ist, um nicht jedesmal den kompletten Joomla-Code samt aller Extensions durchsuchen zu müssen. Und wenn der eine Suchbegriff nicht hilfreich ist (manche Extensions erzeugen ihre Klassenbezeichnungen dynamisch mit PHP), muß man eben einen anderen nehmen, bis man Erfolg hat. Einen geraden Weg zum richtigen Quellcodestück gibt es jedenfalls leider nicht.
[Bearbeiten] HTML
Die meisten Arbeiten mit dem Firebug erledigt man in der HTML-Ansicht. Links wird der bereinigte [1] und formatierte HTML-Code gezeigt.
[Bearbeiten] CSS
Rechts stehen die zum jeweils angewählten Element gehörigen ebenfalls bereinigten Stildefinitionen und zusätzlich die Datei, in der die entsprechende Definition steht. Wenn die Maus über dem Dateinamen steht, wird der volle Pfad zu dieser Datei angezeigt. Dort wird die gesamte kaskadierte Definition des Elements gezeigt, auch die Werte, die von vorhergehenden Definitionen nicht übernommen, sondern verworfen werden. Eine gute Erklärung der verwendeten Reihenfolge und Gewichtung findet man (wie üblich) bei SELFHTML[2].
Beide Seiten zeigen also nicht das, was im Code steht, sondern wie der Browser nach dem Parsen den Code sieht.
Mit dem Button "Inspect" kann gezielt ein bestimmtes Element angesprungen werden, ohne daß man sich von oben durch die Dokumentenstruktur klicken muß.
Auf beiden Seiten können Änderungen vorgenommen werden, die sich sofort auf die Seitenanzeige auswirken. Bei bestehenden Definitionen reicht ein Klick auf die Definition oder ihren Wert.
Nach einem Doppelklick auf die Klasse können weitere Definitionen eingefügt werden. Allerdings werden diese Eingaben sofort nach dem Abschicken ebenfalls geparst und ungültige Definitionen gleich wieder verworfen. Zahlenwerte für den Außen- und Innenabstand, Breite, Höhe, Schriftgröße usw. können mit den Cursortasten auf und ab in Einer schritten verändert werden, so dass man sofort das Ergebnis der Änderung in der Seite sieht.
[Bearbeiten] Edit
Der HTML-Code der Seite kann nach einem Klick auf "Edit" bearbeitet werden. Änderungen erscheinen sofort in der Seite. Sehr nützlich, um noch fehlende Klassen oder Attribute einzufügen.
[Bearbeiten] Layout
In der Layoutansicht werden die Abmessungen des aktuellen Elements gezeigt incl. der Ränder und Abstände. **Beachtet dabei, daß diese Darstellung nur für standardkonforme Browser korrekt ist und ältere Versionen des Internet Explorer das Boxmodell[3] falsch berechnen.
[Bearbeiten] CSS
In der CSS-Ansicht wird das komplette CSS ohne den HTML-Code gezeigt. Hier können ebenso wie in der HTML-Ansicht einzelne Definitionen und Werte nach einem Klick darauf verändert werden.
[Bearbeiten] Edit
Ein Klick auf Edit schaltet die Anzeige in den Bearbeitungsmodus. Das gesamte CSS kann bearbeitet werden.
[Bearbeiten] DOM
In der DOM-Ansicht können sämtliche Eigenschaften des gewählten Elements inspiziert werden.
[Bearbeiten] NET
Unter NET werden die Ladezeiten aller Elemente der Seite angezeigt. Da eine Seite in der Regel mit mehreren offenen Verbindungen zum Server geladen wird, können sich die Ladevorgänge überschneiden. Logischerweise können sie aber erst beginnen, wenn der Browser beim Parsen der Seite beim entsprechenden Aufruf angekommen ist. Bei Elementen, die durch ein Javascript nachgeladen werden, kann die Anforderung also erst starten, nachdem das aufrufende Javascript geladen und gestartet wurde.
Unten steht die jeweils resultierende Gesamtdauer der Ladezeit der Seite. Weil mit mehreren offenen Verbindungen geladen wird, ist dies nicht die Summe aller Einzelladezeiten.
Mit einem Klick auf das + vor den Elementen kann man die gesamte Kommunikation des Browsers mit dem Server für dieses jeweilige Element ansehen.
[Bearbeiten] Download
Die jeweils aktuellste Version des Firebug kann auf getfirebug.com herunter geladen werden.
[Bearbeiten] Referenzen
- ↑ von Fehlern und nicht beachteten proprietären Tags und Attributen befreit
- ↑ selfhtml.org: Reihenfolge und Gewichtung
- ↑ selfhtml.org: Fehler im Boxmodel
