Wednesday, April 4, 2012

Instant Fire Bug Lite

Instant Firebug Lite

Many web developers know about the Firebug tool developed as a plug-in for Firefox and how useful it is when working in the client side (browser).

Some others wanted it on other browsers when developing a web page browser specifically. To that end our Firebug friends developed a javascript version of Firebug called Firebug Lite

The downside is that we have to put a header on the webpage source in order to enable Firebug Lite, with all the effort and risk of doing this (effort: Maybe recompile all the app. risk: Maybe the Firebug can be published on a production version as a mistake).

To the end of removing that disadvantage I was researching a way to make Firebug Lite available without modify the source code and this is the result:

javascript:for (i = 0; i < document.childNodes.length; i++) {if (document.childNodes[i].tagName=='HTML') {for (j = 0; j < document.childNodes[i].childNodes.length; j++) {if (document.childNodes[i].childNodes[j].tagName=='HEAD') {void(newNode = document.createElement('SCRIPT'));void(newNode.setAttribute("type", "text/javascript"));void(newNode.setAttribute("src", ""));void(document.childNodes[i].childNodes[j].appendChild(newNode));break;};};break;};};

If you paste that chunk of code on your browser's URL and press enter Firebug will be available in a few seconds. Try to press F12 and it will appear :) (try it after a few seconds).

I have tested it on Chrome, Firefox, Internet Explorer 7, Opera and Safari, and work fine on all of them, on Firefox only if you don't have the standard (and better) Firebug active, of course.

Note: Although you probably will not use it on Chrome because it comes with a very similar tool built-in (just press F12) note that when you paste the code chunk javascript: is automatically removed, you have to retype it.