Firebug is een Firefox-add-on met coole hulpmiddelen om webpagina-elementen te inspecteren, debuggen en webpagina’s te ontwikkelen. Het is echter onmogelijk om deze tools ook in andere webbrowsers dan Firefox te gebruiken.
Het ontwikkelen van een soortgelijke tool voor andere browsers is misschien een hele klus, maar het zou een grote hulp zijn als Firebug ook in andere browsers zou werken, aangezien iedereen zijn eigen favoriete browser heeft.
Wel, hier komt Firebug Lite om uw behoeften op te lossen. Firebug Lite is een eenvoudigere versie van Firebug, maar het kan worden gebruikt op IE, Opera, Chrome, Safari, iPad en iPhone met behoud van vergelijkbare opties en functies.
10 Must-have iPad Apps voor Designers (2018)
Webontwerpers hebben altijd veel op hun bordje liggen. Ze moeten concepten bedenken, hun…Lees meer
Installeren van Firebug Lite op Opera, Safari & Chrome
Met Firebug Lite is er geen installatie nodig. Geschreven in Java Script, kunt u een Firebug Lite link bookmarken en het zal klaar zijn voor pagina inspectie. Dus wat u moet doen is simpelweg een bladwijzer maken van de onderstaande link (u kunt de link ook naar de bladwijzerbalk van uw browser slepen).
Firebug Lite
Als u de Chrome browser gebruikt, zou de bladwijzer als hieronder moeten verschijnen, als uw bladwijzerbalk zichtbaar is.
Dat is het, uw Firebug Lite zou nu moeten werken wanneer u het wilt gebruiken.
Het gebruik van Firebug Lite op Opera, Safari & Chrome
Nu kunt u Firebug Lite gebruiken om praktisch elke webpagina te inspecteren. Voor dit voorbeeld gebruiken we Wikipedia.org.
Wanneer de webpagina is geladen, klikt u op de Firebug Lite bladwijzer die u eerder hebt opgeslagen en u zult een consol box zien verschijnen aan de onderkant van de webpagina.
Als we de pagina sluiten, ziet u dit linksonder op de pagina.
Nu kunt u de (+) en de (-) zien aan het beginpunt van veel regels. De (+) betekent dat er meer regels gesloten zijn onder de one-liner van html, en als je de regel markeert, zie je welk deel van de pagina het vertegenwoordigt.
Maar als u het makkelijker wilt maken om de lijnen te zien die worden vertegenwoordigd door tekst, foto’s, links of andere elementen op de webpagina zelf, klikt u op de knop ‘Inspecteren’.
Nu kunt u met uw muiscursor op een willekeurig deel van de elementen op de webpagina gaan staan, en u zult de html-regel gemarkeerd zien. Dit maakt het makkelijker voor u om wat inspectie uit te voeren.
Installeren van Firebug Lite op iPad of iPhone
Bookmarklets gaan niet echt goed samen met iPad en iPhone. Om Firebug Lite op iPad en iPhone geïnstalleerd te krijgen, gaat u als volgt te werk:
- Bewaar deze pagina op uw iPad of iPhone.
- Benoem de bladwijzer naar “Firebug”.
- Selecteer en kopieer al het onderstaande script
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F&&F.documentElement.namespaceURI;E=E?F(E,'script'):F('script');E('id',b);E('src',I+g+T);E(b,u);(F('head')||F('body')).appendChild(E);E=new%20Image;E('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened'); - Verwijder de oorspronkelijke URL en plak de bookmarklet.
- Kies “Gereed” op uw toetsenbord.
- Probeer nu een willekeurige website te openen en selecteer de “Firebug”-bladwijzer. U ziet dan een werkende Firebug onder aan het scherm van uw iPad.
Ga naar de bladwijzeroptie en druk op “Bewerken”. Selecteer vervolgens de bladwijzer “Firebug”.
Conclusie
Firebug Lite is veruit goed genoeg om snel pagina’s te inspecteren. Je kunt html, css en elk script bekijken dat is gebruikt om de webpagina op te bouwen. Hoewel Chrome zijn eigen Web Developer-extensie heeft, stelt Firebug Lite je bij lange na niet teleur.