Firefox-Extension: FireBug

13 04 2006

Marienkäfer (Ladybug)Gerade erst hatte ich meine per­sön­li­che Hit­liste der Firefox-​Erweiterungen sozu­sa­gen »als Post zemen­tiert« da stellt Manuela heute eine neue vor, die wohl ganz schnell in mei­ner TOP 3 lan­den wird. Fire­Bug ist kein neuer Film der Pixar Ani­ma­tion Stu­dios, son­dern eine mul­ti­funk­tio­nelle Erwei­te­rung die in ihrem Funk­ti­ons­um­fang fast der gna­den­los guten Web­De­ve­l­oper Exten­sion Kon­kur­renz macht. Schwer­punkt­mä­ßig auf die Über­prü­fung und das Debug­ging von Java­Script und AJAX aus­ge­legt, bie­tet Fire­Bug aber kom­plette Kon­trolle über das Docu­ment Object Model (DOM) einer Web­seite und so las­sen sich auch CSS und XHTML prü­fen, Feh­ler anzei­gen und mehr. Über Optio­nen kann man die Feh­ler­su­che auf bestimmte Berei­che ein­schrän­ken, also z.B. nur JavaScript-​Fehler anzei­gen las­sen u.ä.

Und ähn­lich wie in der Web­De­ve­l­oper Exten­sion las­sen sich alle Teile des DOM nicht nur betrach­ten, son­dern Live und in Farbe auch bear­bei­ten. Fire­Bug läßt sich nicht nur mit der Maus son­der auch mit der tas­ta­tur bedie­nen und letz­te­res ist in vie­len Fäl­len sogar kom­for­ta­bler und genauer, weil man sich mit den Cursor-​Tasten gezielt durch das DOM arbei­ten kann. Wer sich übri­gens nach der Instal­la­tion mit zwei FireBug-​Fehlermeldungen alá:

FireBug.domUtils has no properties ... style.js (line 265)

FireBug Screenshotkon­fron­tiert sieht, der hat den DOM–Inspec­tor des Fire­fox nicht instal­liert. In die­sem Fall ein­fach den Fire­fox noch mal neu instal­lie­ren und dabei nicht die Stan­dard­va­ri­ante wäh­len, son­dern die Benut­zer­de­fi­nierte (dort dann DOM–Inspec­tor aus­wäh­len). Trotz sei­ner gerin­gen Größe (55 kB) ist Fire­Bug sehr umfang­reich, schon ziem­lich aus­ge­reift und eine Pflicht-​Extension für jeden Webent­wick­ler. Einige Bugs sind natür­lich noch ent­hal­ten, diese kön­nen jedoch im Forum von Joe Hewitt ange­spro­chen und dis­ku­tiert wer­den. Ges­tern kün­digte Hewitt dar­über hin­aus noch einen ech­ten JavaScript-​Debugger für die nächste Ver­sion des Käfers an. In sei­nem Blog gibt es regel­mä­ßig Tips und Tricks zu die­sem Tool.

Mit der Troika: Web­De­ve­l­oper, Fire­Bug und XRay sollte ein Web­de­si­gner eigent­lich rund um zufrie­den sein, läßt sich doch der Code einer Web­seite nun­mehr in wirk­lich alle Ein­zel­hei­ten zer­le­gen. Und wenn dann erst mal zwei (!) grüné Häk­chen in der Sta­tus­zeile des Fire­fox erschei­nen (HTML Tidy und Fire­Bug), dann ist die Seite vom tech­ni­schen Stand­punkt her, wohl wirk­lich fehlerfrei.