Firebug, webdev plugin voor Firefox

[Juup]

Firebug is een geweldige plugin voor Firefox waarmee je real-time je HTML, DOM, CSS en Javascript kan bekijken, debuggen en editen.

Als je het installeert en je opent firebug door rechtsonder in je browser op het kleine grijze of groene rondje te klikken, dan krijg je allereerst de HTML source te zien van de pagina die je bekijkt.

Vervolgens kun je alles inspecteren, debuggen en veranderen. Het is echt een super tool.

Javascript:


Netwerkverkeer:


Er zitten zoveel functies in dat je elke keer weer iets nieuws ontdekt.
Zo kun je bijvoorbeeld een CSS waarde (bijvoorbeeld margin: 10px;) aanklikken en dan met de pijltjes toetsen of de pageup & pagedown de waarde veranderen.

Laten we in dit topic Firebug bediscussieren en tips & trucs delen.

[Rowanov]

Dit is volgens mij wel een aardige verbetering in vergelijking met de gangbare Web Developer-toolbar. Waar de Web Developer soms iets uitgebreider is, is deze zeker een stuk vriendelijker in het gebruik en is de interface een stukje gelikter.

Een punt van ergernis bij de webdev-toolbar vond ik altijd de functie "edit css", waar dat in deze add-on toch echt een stuk beter is uitgewerkt.

Verder dan dit wereldkundig maken zie ik niet echt in wat je met het topic wil bereiken. Misschien is het handig als je zelf wat tips en trucks geeft om de discussie wat op gang te helpen

[BtM909]

Ik zie hier eerlijk gezegd ook geen toegevoegde waarde in. Deze post zou eventueel wel in [Firefox] Wat vinden we ervan? Deel X passen. TS, wat voor discussie verwacht je uit dit topic?

[Verwijderd]

ik snap dat het weinig discussie zal opleveren, maar ik vind dit soort tips toch wel erg handig. Ik heb vaak niet veel zin om de uitgebreide "wat vinden we ervan" topics door te worstelen. Misschien is het een idee om een soort conventie door te voeren om dit soort topics met [tip] in de header te starten oid?

[Rowanov]

Wat verwacht je van een "tip" topic? Ik zie dat al snel verzanden in een oeverloos boekwerk waar je net zo makkelijk nuttige dingen uit kan halen als wanneer je even wat termen in google klopt. Misschien is het een idee het een en ander in het openstaande topic van de W&G-FAQ in aanbouw te vermelden. Het is alleen jammer dat dat ook niet zo snel meer loopt.

[Juup]

Ik verwacht dat we in dit topic Firebug bespreken. Het is niet zomaar een klein pluginnetje maar een flink stuk volwassen software waar een Mozilla Developer al een hele tijd aan werkt. Je kunt er zoveel mee (veel meer bijvoorbeeld dan MS Script Debugger, dat alleen JS kan debuggen) dat er ook veel over te zeggen valt.

Mocht het niemand wat interesseren dan bloedt dit topic vanzelf dood...

Ontopic:

Yahoo Developer Network heeft een webcast online geslingerd waarin de maker van Firebug een paar power-featues uit de doeken doet:
Joe Hewitt — "Welcome to Firebug 1.0" (flash)
Joe Hewitt — "Welcome to Firebug 1.0" (quicktime)

[TheDane]

Ik nomineer deze plugin echt tot lifesaver van 't jaar

We hebben een website waar pdf files te downloaden zijn. Verder niks. Webalizer geeft al ruim 3 jaar lang ongeveer dubbel zoveel datatransfer aan als we zelf in de applicatie meten. Nooit echt onderzocht, op 1 poging na ... maar nooit tot een oplossing gekomen.

10 minuten nadat ik Firebug had geinstalleerd zag ik bij de "Net" tab dat een willekeurige pagina dik 350kb aan data binnensleept (5 frames )
Tel daarbij een clickpath van zo'n 5 a 6 pagina's per brochure (van gemiddeld anderhalve MB) bij, en voila. 100% overhead per gedownloade brochure

Hulde voor deze plugin dus. Erg erg fijn

[Coju]

Ik had al een topic over Firebug verwacht. Onmisbaar is het inmiddels voor mij. Maakt devven zoveel makkelijker. Ik heb ook een tijd Webdeveloper toolbar gebruikt en dat was ook niet verkeerd maar dit is zoveel beter. Ik kan niet meer zonder.

[André]

Ik heb hem even bekeken maar ben gematigd positief, de webdeveloper toolbar van Chris Pederick heeft precies dezelfde mogelijkheden plus nog een paar meer. Ik denk niet dat ik overstap.

Wel moet ik zeggen dat je als webdeveloper eigenlijk niet zonder deze tools kunt, echt heel handig.

[Zerora]

Ik vind zelf Aardvark ook een handige uitbreiding op firefox mbt het webdevven/designen
Het enige wat het doet is het omlijnen van het block/frame waar je muis op is. Optie is aan/uitzetbaar.

[ Voor 28% gewijzigd door Zerora op 02-02-2007 10:06 ]

[crisp]

hmmz, Firebug stripped CSS properties die door Firefox (nog) niet ondersteund worden; da's wel een minpunt...

[InZane]

André schreef op vrijdag 02 februari 2007 @ 09:57:
Ik heb hem even bekeken maar ben gematigd positief, de webdeveloper toolbar van Chris Pederick heeft precies dezelfde mogelijkheden plus nog een paar meer. Ik denk niet dat ik overstap.

Wel moet ik zeggen dat je als webdeveloper eigenlijk niet zonder deze tools kunt, echt heel handig.

Same here, ik heb ze beiden draaien, maar ik moet eerlijk zeggen dat ik firebug maar matig gebruik in tegenstelling tot de webdev toolbar.

[chem]

InZane schreef op Friday 02 February 2007 @ 10:24:
[...]


Same here, ik heb ze beiden draaien, maar ik moet eerlijk zeggen dat ik firebug maar matig gebruik in tegenstelling tot de webdev toolbar.

true, het css gedeelte van firebug en webdeveloper overlappen enorm; de uitwerking vind ik bij de laatste intuitiever en duidelijker (en zelfs uitgebreider).

Maar de JS debug tools en de net-tab zijn zo enorm handig; de venkman debugger is toch een bitch en geeft zelf ook problemen met opstarten etc.
Even een breakpoint zetten, variabelen uitzoeken etc; geen kazige alert()'s meer nodig! Ook het uitzoeken van hoe een pagina inlaadt is makkelijker en overzichtelijker dan live http headers.

[SchizoDuckie]

André schreef op vrijdag 02 februari 2007 @ 09:57:
Ik heb hem even bekeken maar ben gematigd positief, de webdeveloper toolbar van Chris Pederick heeft precies dezelfde mogelijkheden plus nog een paar meer. Ik denk niet dat ik overstap.

Wel moet ik zeggen dat je als webdeveloper eigenlijk niet zonder deze tools kunt, echt heel handig.

That's where you're wrong.

Firebug is eigenlijk voor mij al onmisbaar tijdens het developen, testen en runnen van javascript en Ajax calls, Voor CSS gebruik ik nog steeds de webdev toolbar, en de combinatie van beide maakt ontwikkelen in FireFox gewoon echt een droom.

Een paar van de grote voordelen:
• CTRL + F12 opent firebug in een nieuw venster, deze zet je op je 2e monitor neer, je klikt Inspect aan, en klikt daarna bijv. het element open wat je update via je ajax requests. Firebug ziet dan de wijzigingen in de DOM en highlight wat er gebeurt
• Console.log(debug info) // Heerlijk in je javascript om te kunnen loggen naar een extern windowtje (alert )
• Als er een error gethrowed wordt in je pagina komt er een nieuw regeltje in je firebug log bij met een link naar de exacte regel in je JS source waar dit gebeurde, en met de debugger kan je hier doorheen steppen, source editten, local vars bekijken, etc.
• Console.profile('dit profilet bijvoorbeeld een functie') en Console.profileend() // Geeft een rapport van hoe wat wanneer hoe vaak bepaalde functies gerunned worden
• De 'Net' Tab is heilig, je ziet een timeline met hoe lang je requests duren, niet alleen voor javascripts, maar bijv. ook voor ál je IMG tags, flash, etc.
• Je kunt in no-time een pagina editten, even een stukje javascript er uit slopen bijvoorbeeld om een brak formulier toch te kunnen submitten.

De uitgebeirde introductiefilm van firebug hierboven is echt een aanradertje als je meer dan 3 regels javascript per week schrijft

[ Voor 10% gewijzigd door SchizoDuckie op 02-02-2007 11:05 ]

[OkkE]

Ik gebruik ze alletwee al een tijdje. Ik moet zeggen dat ik Firebug nog niet echt uitvoerig getest heb, maar dingen die ik bij de DevToolbar erg handig vind, is dat je Java, JS en/of Meta-redirects kunt uizetten, eenvoudig een bepaald element (p, a, div) kunt omlijnen, etc... De DOM, CSS overerving, padding en margin indicatie van Firebug vind ik wel weer erg fijn. In mijn ogen vullen ze elkaar prima aan.

[Juup]

Firebug heeft ook tab-completion op javascript objecten. Als je bijvoorbeeld in de "script" tab zit, en je vult een nieuwe "watch expression" in, dan kun je "document." intypen en dan met tab door alle properties en methods heenfietsen.

[daniëlpunt]

FireBug

Het enige jammere vind ik dat als je een pagina verlaat alle foutmeldingen in de console worden gewist.

[Juup]

super-muffin schreef op vrijdag 02 februari 2007 @ 19:03:
Het enige jammere vind ik dat als je een pagina verlaat alle foutmeldingen in de console worden gewist.

Da'sjuist super fijn! Als je normaal na een tijdje surfen je error console opent staat er een waslijst aan foutmeldigen van sites waar je ooit geweest bent, maar waar je niets aan hebt.

[Victor]

André schreef op vrijdag 02 februari 2007 @ 09:57:
Ik heb hem even bekeken maar ben gematigd positief, de webdeveloper toolbar van Chris Pederick heeft precies dezelfde mogelijkheden plus nog een paar meer. Ik denk niet dat ik overstap.

Wel moet ik zeggen dat je als webdeveloper eigenlijk niet zonder deze tools kunt, echt heel handig.

Nou, dan zou ik Firebug toch eens beter bekijken. Hoewel ik het persoonlijk echt een uitkomst vind voor het schrijven van JavaScript, heeft het ook voor bijvoorbeeld CSS een hoop handige foefjes.

- Allereerst, de JavaScript profiler. Tuurlijk kon je al wel zelf meten hoe lang een functie er over deed, maar ik nam er de tijd niet voor. Ik heb gisteren toevallig nog een functie 2x zo snel gemaakt dankzij de profiler, doordat je heel makkelijk kan zien waar het mis gaat. Hoewel van 30ms naar 15ms misschien geen zichtbare verbetering is, tellen al deze verbeteringen al snel aardig op.

- Het met één klik in- en uitschakelen van CSS rules. Heerlijk! Soms zit ik te kijken hoe ik iets het netst op kan lossen en dan gebeurt het al snel dat ik regels aan't weg commenten ben om te kijken wat het resultaat is. Nu is het even die specifieke CSS rule aanklikken en hij's uitgeschakeld. Nog een klik en hij doet weer mee. Erg handig.

- De JavaScript debugger is ook geniaal. Geen alerts meer, geen lelijke constructies om te kijken waar het mis gaat. Gewoon door je code steppen, breakpoints zetten, variabelen bekijken: het scheelt een hoop tijd.

- De HTML tab: direct zien hoe de gerenderde HTML er uit ziet (handig als je via JS in je DOM zit te spitten) en welke CSS er op elk element van toepassing is.

Firebug biedt een hoop mogelijkheden om professioneel om te springen met client-side web development, evenals de Web developer toolbar. Ik zou niet willen kiezen, want ze maken allebei het werk zo veel makkelijker. Firebug vult de toolbar (die toch wat sneller te benaderen is) uitstekend aan wat mij betreft.

Jammer alleen dat we niet over een soortgelijke tool in IE kunnen beschikken. Zou erg welkom zijn bij het fixen van de vele fratsen die deze browser rijk is.

[Blaise]

Jammer alleen dat we niet over een soortgelijke tool in IE kunnen beschikken. Zou erg welkom zijn bij het fixen van de vele fratsen die deze browser rijk is.

IE7 heeft de webdeveloper toolbar (ken je wellicht al) maar die bevat veel minder en slechter uitgewerkte opties. Vooral Javascript debuggen is een ramp.

[Victor]

Blaise schreef op zaterdag 03 februari 2007 @ 13:32:
[...]
IE7 heeft de webdeveloper toolbar (ken je wellicht al) maar die bevat veel minder en slechter uitgewerkte opties. Vooral Javascript debuggen is een ramp.

Ik heb 'm geïnstalleerd staan, maar daar is ook alles mee gezegd. Ik gebruik 'm eigenlijk nooit (af en toe voor het resizen van het venster naar een bepaalde resolutie). Verder is het maar een vrij beperkt stuk gereedschap.

JavaScript debugging (dus met breakpoints e.d.) onder IE is overigens wel mogelijk, maar vereist Visual Studio 2005 en werkt bij lange na niet zo handig als Firebug.

[Erkens]

Juup schreef op zaterdag 03 februari 2007 @ 13:00:
[...]

Da'sjuist super fijn! Als je normaal na een tijdje surfen je error console opent staat er een waslijst aan foutmeldigen van sites waar je ooit geweest bent, maar waar je niets aan hebt.

niet als je bijvoorbeeld een onunload wilt debuggen
Ik gebruik hem erg veel, ook firebuglite wil ik nog wel eens gebruiken (voor IE) maar dat is niet helemaal handig, maar iig de console.log is echt handig, ik denk niet dat ik nog echt zonder kan.
Hoewel, je moet niet vergeten om ook je applicaties uitvoerig te testen _zonder_ firebug aangezien firebug behoorlijk diep in je Firefox zit waardoor je niet 100% zeker kan weten of het net zo reageerd als zonder
En ja ik heb wel eens gevallen gehad waarbij het wel met firebug werkte, maar zonder niet meer!

[Ramon]

Ik weet dat dit een oud topic is maar ik wilde toch even iets delen

Het viel me vandaag op dat Firebug 1.05 niet alle CSS weergeeft in de Inspect tab (kan je op de t.net fp al zien als je bijvoorbeeld een A inspect). Vanalles geprobeerd firefox beta's en extensions geuninstalled maar niets hielp. Nu is er een firebug beta en daar werkt het allemaal wel goed mee.

[MoietyMe]

Ramon schreef op vrijdag 07 maart 2008 @ 19:21:
Ik weet dat dit een oud topic is maar ik wilde toch even iets delen

Het viel me vandaag op dat Firebug 1.05 niet alle CSS weergeeft in de Inspect tab (kan je op de t.net fp al zien als je bijvoorbeeld een A inspect). Vanalles geprobeerd firefox beta's en extensions geuninstalled maar niets hielp. Nu is er een firebug beta en daar werkt het allemaal wel goed mee.

Klopt, dat was mij ook al opgevallen. Zit nu sinds een maandje ofzo op de beta van Firefox 3 en daar heb je dan de beta van Firebug voor (1.1). En daar werkt het gelukkig wel.

[Verwijderd]

Er is ook een plugin voor firebug, firecookie, waarmee je alle cookies kunt zien/beheren
http://www.softwareishard.com/blog/?page_id=5

ook aan te raden is de Yslow plugin van yahoo, voor als je je pagina wilt optimaliseren
http://developer.yahoo.com/yslow/

[ Voor 31% gewijzigd door Verwijderd op 08-03-2008 11:05 ]