Firebug und Web Developer – ein starkes Duo

Auch auf die Gefahr hin, das Firebug und Web Developer weitestgehend bekannt sind – mit diesen Add-ons für den Firefox-Browser stehen dem Webentwickler zwei unentbehrliche Werkzeuge zur Verfügung, die das Leben unendlich leichter machen und Stunden an Zeit sparen können. Besonders für die Arbeit mit Content Management Systemen, wo häufig bei der Entwicklung auf bereits existierende Templates zurückgegriffen wird und die mit einer Fülle von Divs und Klassen daherkommen. Hierbei die Orientierung zu behalten, könnte ohne diese Tools zu einer nervenaufreibenden Angelegenheit werden. Weh´dem, der diese beiden Top-Tools noch nicht kennt.

Firebug

Firebug ist von diesen beiden aus meiner Sicht das wichtigere Werkzeug. Mit einem  Rechtsklick (Inspect Element) auf ein beliebiges Element einer Seite öffnet sich die Konsole von Firebug am unteren Rand der Seite.

HTML/CSS identifizieren, analysieren, editieren

Konsole FirebugIm linken Fenster der Konsole wird der Html-Code dargestellt. Im rechten Fenster der CSS-Code. Fährt man mit der Maus über ein Html-Element wird auf der Seite das entsprechende Element farblich umrandet hervorgehoben – so sieht man sofort um welches Element es sich handelt. Sowohl auf der Html-Seite als auch auf der CSS-Seite der Konsole kann direkt editiert werden. Werte, Klassen, Stile und Namen können in die betreffenden Boxen eingeben und sofort auf der Seite angezeigt werden. So kann kann man erstmal ein wenig experimentieren. Wenn einem das Ergebnis dann zusagt, trägt man die Werte dann in seine CSS-Datei ein. So muss man nicht x-mal das Schema Edit CSS>>Copy CSS>>Reload Page durchlaufen. Über die Suchfunktion kann auch gezielt nach Elementen/Klassen etc. gesucht werden.

JavaScript und DOM

Auch für JavaScript-Programmierer hat Firebug einiges zu bieten. Es kann als Debugger benutzt werden mit dem fehlerhafter Code identifiziert wird. Fehler werden sofort mit einem rotem Kreuz rechts unten am Browserfenster angezeigt. Mit einem Klick darauf wird der Code mit den Meldungen angezeigt inklusive Beschreibung, Line number und Datei.  Mit dem Tab DOM (Document Object Model) wird die Hierarchie der Objekte und Funktionen einer Seite angezeigt. Mit einem Doppelklick auf ein Object kann eine Variable editiert werden; mit Enter wird diese evaluiert.

Network Monitoring

Klickt man auf das Tab Net, werden die Ladezeiten der einzelnen Elemente einer Seite angezeigt. Dies ist sehr hilfreich bei der Optimierung der Ladezeiten einer Seite. Die einzelnen Elemente lassen sich auch noch nach Typ filtern: Image, Script, Flash, Html, CSS.

Web Developer

Web Developer hat eine Unmenge an Features, die ich hier nicht alle aufzählen möchte. Sie dienen hauptsächlich der Analyse und Information der Elemente einer Seite. Die Features lassen sich wahlweise in einer Toolbar anzeigen oder per Kontextmenü aufrufen. So lassen sich viele Funktionen und Informationen anzeigen, ausschalten oder einschalten: Cookies, CSS, JavaScript, Forms, Farben, Bilder, Div-Strukturen, Klassen und und und. Auch kann man sich Html und CSS validieren lassen.

Fazit

Firebug ist ein „Must have“, Web Developer ein „Nice to have“-Werkzeug. Nicht nur für den praktischen Einsatz bei seinen eigenen Projekten sondern auch zum studieren und analysieren von fremden Websites.

Weblinks

Firebug – Web Development evolved – Homepage von Firebug

Chrispederick.com – Entwicker von Web Developer