28.06.2014, 09:11

Hans-Christian Dirscherl

Webmaster-Tool

Firebug: Webseiten untersuchen mit genialem Firefox-Addon

Mit dem Firefox-Addon Firebug analysieren Sie Webseiten bis ins kleinste Detail.

Mit dem kostenlosen Firefox-Add-on Firebug gewinnen Sie ruckzuck den Überblick über den Aufbau einer Website und über die Parameter von deren HTML-Tags. Insbesondere CSS-Werte lassen sich schnell überprüfen und versuchsweise verändern. Javascript-Programmierer können Firebug zudem zur Fehlersuche verwenden und damit auch schnell mal neuen Skripte ausprobieren.
Das Firefox-Addon Firebug bietet Web-Entwicklern umfangreiche Funktionen um CSS, HTML und JavaScript auf ihren Webseiten auf Fehler zu kontrollieren und diese zu protokollieren und anschließend zu korrigieren. Außerdem können Sie mit Firebug beispielsweise CSS-Layouts überprüfen, DOM-Objekte anzeigen und editieren oder genaue Analysen über die Ladezeiten der einzelnen Seitenelemente anstellen. Firebug hat sich als dermaßen unverzichtbar herausgestellt, dass es von Browserentwicklern wie Google oder Apple sowie Microsoft zum Vorbild genommen wurde für Entwicklerwerkzeuge, die direkt in Google Chrome, Safari und in den Internet Explorer integriert wurden. Seit der Einführung von Firefox 10 versucht Mozilla jedoch Firebug direkt Konkurrenz zu machen. Und zwar mit den direkt in Firefox 10 eingebauten Entwickler-Werkzeugen, die Sie unter "Extras, Web-Entwickler" finden.

Firebug starten

Viele Wege führen zum Ziel um dieses ungemein nützliche Firefox-Addon zu starten. Entweder über das Browsermenü "Ansicht, Firebug" oder über das Kontextmenü der rechten Maustaste ("Element mit Firebug untersuchen"). Über das Wanzen-artige Icon rechts oben in Firefox können Sie Firebug ebenso starten wie mit einen Tastendruck auf F12. STRG+F12 startet Firebug zudem in einem eigenen Fenster (so wie auf unserem Aufmacherbild zu dieser Meldung oben). Standardmäßig öffnet sich das Firebugfenster am unteren Browserrand, es besteht defaultmäßig aus einem größeren linken und einem kleineren rechten Fenster (die Größe lässt sich aber jederzeit anpassen).

Aufbau des Firebug-Fensters

Das linke Firebug-Fenster besteht aus mehreren Reitern: Konsole (die Sie extra aktivieren müssen, um Fehlermeldungen, wie beispielsweise Syntaxfehler angezeigt zu bekommen), HTML, CSS, Skript (hier können Javascript-Programmierer Debugging-Funktionen nutzen), DOM und Netzwerk sowie Cookies. Das "Konsole"-Menü ist für Javascript-Programmierer wichtig. Hier können Sie schnell mal neue Javascript-Code-Teile schreiben und ausprobieren, ohne dafür eigens eine HTML-Seite als Rahmen erstellen zu müssen. Die Konsole bietet sogar Code-Ergänzung und erleichtert damit das Programmieren ungemein.
Sofern weitere für Firebug gedachte Firefox-Addons wie das Prüf-Addon Yslow installiert sind, werden auch diese als Reiter in Firebug integriert. Nach dem Start von Firebug ist standardmäßig der Reiter HTML geöffnet.
HTML-Quellcode und CSS-Werte auf einen Blick
Schauen wir uns den Menü-Punkt HTML ausführlich an: Im linken (vom Start weg größeren) Firebug-Fenster wird der gesamte Quelltext einer Website hierarchisch dargestellt – jedes Element, das Unterebenen enthält, lässt sich durch einen Klick auf das Plus-Zeichen ausklappen. Im eingeklappten Zustand behält man leichter den Überblick über den Quellcode einer Website. Wenn Sie hier ein Element anklicken, werden im rechten Fenster unter dem Reiter „Styles“ die zu diesem Element gehörenden CSS-Formatierungen inklusive der vererbten Werten angezeigt (überschriebene CSS-Werte werden durchgestrichen dargestellt). Wenn Sie jetzt auf die Schnelle eine andere Optik ausprobieren wollen, dann ändern Sie einfach die Werte für die Formatierungen: Tragen Sie also beispielsweise eine andere Farbe von Links ein, zum Beispiel red statt orange. Die Änderung wird sofort im Browser dargestellt. Obendrein wird die ausgewählte Farbe in einem kleinen Kästchen als Vorschau angezeigt. Das klappt ebenso mit Font-Styles: Je nachdem, ob Sie normal, italic oder bold eintippen, ändert sich sofort die Schriftdarstellung im ausgewählten Element.

Quellcode im Browserfenster wiederfinden

Wenn Sie mit dem Mauszeiger über den Quellcode fahren, dann wird im oberen Browserfenster der Teil der Website, der durch den jeweiligen Quellcode dargestellt wird, hellblau hervorgehoben. Sie sehen also sofort, welcher Code-Teil was auf der Website bewirkt.

Suchen mit Firebug

Genial ist die Suchfunktion über das Eingabefeld rechts oben im Firebug-Fenster: Wenn Sie einen bestimmten Code-Bestandteil oder Text von der Seite suchen, dann geben Sie den gesuchten Begriff einfach hier ein. Firebug springt dann sofort an die Stelle im Quelltext, an der der gesuchte Begriff steht. Dabei können Sie auch festlegen, ob Groß- und Kleinschreibung beachtet werden soll.

Layout und DOM

Neben Styles gibt es auch noch die Reiter "Berechnet" (mit allen Stile-Werten), Layout und DOM im rechten Fenster. Layout verschafft schnell einen optischen Überblick über Seiten- und Elementeabstände. Visuell werden hier also die Pixel-Werte für Offset, Margin, border und padding sowie der Inhalt abgebildet. Bewegen Sie die Maus über die Layoutdarstellung, um den gewünschten Abschnitt zu markieren. Auch hier können Sie jederzeit mit den Werten spielen um unterschiedliche Darstellungen auszuprobieren. Über den Reiter DOM können Sie die DOM-Struktur der Website erkunden.
Lesen Sie auf der nächsten Seite:
Vorherige Seite
Seite 1 von 2
Diskutieren Sie mit anderen Lesern über dieses Thema:
PC-WELT Hacks
PC-WELT Hacks Logo
Technik zum Selbermachen

3D-Drucker selbst bauen, nützliche Life-Hacks für den PC-Alltag und exotische Projekte rund um den Raspberry Pi. mehr

Angebote für PC-WELT-Leser
PC-WELT Onlinevideothek

PC-WELT Online-Videothek
Keine Abogebühren oder unnötige Vertragsbindungen. Filme und Games bequem von zu Hause aus leihen.

Tarifrechner
Der PC-WELT Preisvergleich für DSL, Strom und Gas. Hier können Sie Tarife vergleichen und bequem viel Geld sparen.

PC-WELT Sparberater
Das Addon unterstützt Sie beim Geld sparen, indem es die besten Angebote automatisch während des Surfens sucht.

Telekom Browser 7.0

Telekom Browser 7.0
Jetzt die aktuelle Version 7 mit neuem Design und optimierter Benutzerführung herunterladen!

- Anzeige -
Marktplatz
Amazon

Amazon Preishits
jetzt die Schnäpchen bei den Elektronikartikel ansehen! > mehr

UseNext

10 Jahre UseNeXT
Jetzt zur Geburtstagsaktion anmelden und 100 GB abstauben! > mehr

22776
Content Management by InterRed