Firebug Lite: heel eenvoudig de fouten in je code opsporen!
Noëmi van de Moosdijk |
2009-12-16 |
Programmeren en techniek
Als je vaker websites maakt zul je regelmatig te maken hebben met het moeten debuggen van een website. Waarschijnlijk ben je dan wel bekend met de FireFox-plugin 'Firebug'. Wanneer je er nog nooit van gehoord hebt, kun je eens kijken naar een eerder artikel hierover van mijn collega Bob.
Persoonlijk gebruik ik Firebug dan ook dagelijks. Het werkt geweldig als je een fout moet opsporen in een website of als je gewoonweg even snel wilt kijken hoe een andere website gemaakt is. Eerlijk is eerlijk, ik zou niet meer zonder kunnen. ;-)
Het grote voordeel van Firebug is meteen ook het grote nadeel; het werkt zo geweldig dat wanneer je een website moet gaan debuggen voor bijvoorbeeld Internet Explorer, je weer eens hard met je neus op de feiten gedrukt wordt doordat Firebug alleen beschikbaar is voor Firefox.
Gelukkig zijn er meer mensen die met dit probleem te maken hebben en zijn de makers van Firebug aan de slag gegaan om een soortgelijke tool te ontwikkelen die wel geschikt is voor Internet Explorer.
Deze tool heeft de toepasselijke naam 'Firebug Lite' gekregen. Naast Internet Explorer is de Lite-versie ook geschikt voor gebruik met Opera en Safari.
In tegenstelling tot Firebug voor FireFox is Firebug Lite geen add-on of een programma, maar een Javascript dat je moet laden.
Je kunt ervoor kiezen om het aan te roepen in de pagina die je wilt debuggen, maar je kunt het ook aanroepen door de volgende code als een Favoriet toe te voegen aan Internet Explorer:
javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
Misschien is het je al opgevallen, maar in de code hierboven staat een versienummer. Op het moment dat er een nieuwe versie van Firebug Lite uit is, zal deze code dan ook wellicht niet langer meer werken.
Daarom is het aan te bevelen om vóór het toevoegen even een kijkje te nemen op de website van de makers om er zeker van te zijn dat het nog steeds de meest recente versie is. Natuurlijk kun je vanaf hun website de link ook toevoegen aan je Favorieten-balk. Op de website vind je de link onder de kop 'Firebug Lite as bookmarklet'.
Wanneer je dit gedaan hebt, kun je met Firebug Lite de code van iedere gewenste pagina bekijken door de pagina op te roepen en vervolgens de zojuist gemaakte link (favoriet) aan te klikken.
Hoewel er nog een lange weg te gaan is voordat Firebug Lite ook maar in de buurt komt van de vele mogelijkheden van Firebug voor Firefox, zijn de makers hard op weg en maakt de tool het debuggen in andere browsers dan Firefox al een stuk makkelijker.
Happy debugging!
Persoonlijk gebruik ik Firebug dan ook dagelijks. Het werkt geweldig als je een fout moet opsporen in een website of als je gewoonweg even snel wilt kijken hoe een andere website gemaakt is. Eerlijk is eerlijk, ik zou niet meer zonder kunnen. ;-)
Het grote voordeel van Firebug is meteen ook het grote nadeel; het werkt zo geweldig dat wanneer je een website moet gaan debuggen voor bijvoorbeeld Internet Explorer, je weer eens hard met je neus op de feiten gedrukt wordt doordat Firebug alleen beschikbaar is voor Firefox.
Gelukkig zijn er meer mensen die met dit probleem te maken hebben en zijn de makers van Firebug aan de slag gegaan om een soortgelijke tool te ontwikkelen die wel geschikt is voor Internet Explorer.
Deze tool heeft de toepasselijke naam 'Firebug Lite' gekregen. Naast Internet Explorer is de Lite-versie ook geschikt voor gebruik met Opera en Safari.
In tegenstelling tot Firebug voor FireFox is Firebug Lite geen add-on of een programma, maar een Javascript dat je moet laden.
Je kunt ervoor kiezen om het aan te roepen in de pagina die je wilt debuggen, maar je kunt het ook aanroepen door de volgende code als een Favoriet toe te voegen aan Internet Explorer:
javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
Misschien is het je al opgevallen, maar in de code hierboven staat een versienummer. Op het moment dat er een nieuwe versie van Firebug Lite uit is, zal deze code dan ook wellicht niet langer meer werken.
Daarom is het aan te bevelen om vóór het toevoegen even een kijkje te nemen op de website van de makers om er zeker van te zijn dat het nog steeds de meest recente versie is. Natuurlijk kun je vanaf hun website de link ook toevoegen aan je Favorieten-balk. Op de website vind je de link onder de kop 'Firebug Lite as bookmarklet'.
Wanneer je dit gedaan hebt, kun je met Firebug Lite de code van iedere gewenste pagina bekijken door de pagina op te roepen en vervolgens de zojuist gemaakte link (favoriet) aan te klikken.
Hoewel er nog een lange weg te gaan is voordat Firebug Lite ook maar in de buurt komt van de vele mogelijkheden van Firebug voor Firefox, zijn de makers hard op weg en maakt de tool het debuggen in andere browsers dan Firefox al een stuk makkelijker.
Happy debugging!
