FireBug is a debug tool that integrates with FireFox. You
can change the DOM-tree, do logging, analyze AJAX-traffic, have advanced error
reporting and probably some things I havenâ€™t found out yet.
way is like making fire with some stones, eventually a fire will start, but
some matches would really help. Iâ€™ll also take a quick look at View Source
Chart, thatâ€™s a tool that views the source of your webpage and displays how the
current DOM-tree looks (normal source tools view the static source of a web
page) with colors and formatting.
Changing the DOM-tree
and using the command line
Install FireBug from the FireBug install page and restart FireFox. Create an html page (with notepad or your favorite editor)
Open the page and open the FireBug console (F12) and type abc
It will display the div tag from the .html file. By pressing
up and down on your keyboard you can iterate through previous commands. Type abc.innerHTML=â€<b>hello
world</b>â€ in the console. As you can see the page is immediately
When you click the inspector tab and expand all the arrows
you see the current DOM-tree. Hovering above element will highlight them in
Changing existing pages is also possible. Visit google.com
and copy and paste the following lines (one by one):
<span style="font-family: 'courier new', courier, monospace;">document.firstChild.childNodes.firstChild.childNodes.width=770;</span>
<span style="font-family: 'courier new', courier, monospace;">document.firstChild.childNodes.firstChild.childNodes.height=82;</span>
<span style="font-family: 'courier new', courier, monospace;">document.firstChild.childNodes.firstChild.childNodes.src='http://www.amis.nl/gfx/headerbg.gif'</span>
This will change the layout of google:
With the options button it is possible to enable the display
of XMLHttpRequest POST and GET messages, also known as AJAX-request. Visit www.netflix.com and click on browse
collection and hover over the images:
When you click the arrow to expand the entry you can see
what the response was and even analyze the headers.
This is very nice for debugging. I used to use Webscarab,
this is a proxy that displays all the traffic. Another alternative is Fiddler,
but that only works in Internet Explorer. Webscarab works on every browser.
Since I installed FireBug I didnâ€™t use Webscarab much anymore, the only thing I
used it for is checking which images are loaded on the background when I
modified my html on the fly. Analyzing synchronous http requests isnâ€™t possible
with FireBug, thatâ€™s another reasing to use Webscarab.
command to analyze an object. Go to http://technology.amis.nl
and type inspect(xmlHttpRequest) this will give you the object that retrieved
the number of total posts read today on the blog.
It even prints the functions of the object! Iâ€™m not finished
yet, it gets better. Assume you want to select the first td tag in your
document with one line of code, just do inspect($x(â€œ//tdâ€)) and you can
inspect that object. Letâ€™s break up this line of code to explain what I did.
$x(â€œ//tdâ€) stands for return an array of elements that match the XPath expression
//td. Since itâ€™s an array we can say we want the first element .
$(â€œ//tdâ€) returns an object that can be used as an argument in the inspect
$(â€œidâ€) does a document.getElementById and $$(â€œcssâ€) selects
all elements that match the css style between double quotes. For more command
line functions check out http://www.joehewitt.com/software/firebug/docs.php
add the following piece of code to you page:
printfire.args = arguments;
var ev =
When you do printfire(â€˜Hello World!â€™); the text Hello World!
will be displayed in the FireBug console. Bye bye annoying alert boxes!
FireBug is great. Old errors disappear automatically, error messages take up
less space and line numbers are provided.
View source chart
Another thing I came across while checking out FireBug was
View source chart (it is not a part of FireBug, but another plugin). It formats your DOM-tree (thatâ€™s right, not the html
Itâ€™s also possible to expand and close blocks by clicking on
Version 0.4 preview
I had some questions about FireBug and mailed the creator
I got a swift reply and Joe told me he was creating version 0.4. It has a long
list of new features: http://joehewitt.com/software/firebug/releases/0.4notes.php
The new logging is
really nice, it has log4j style logging with INFO, WARN and DEBUG and ERROR.
The printfire command is replaced with console.log and you don’t need to put in an extra function to enable debugging.
Another great function is the debugger, you can set
breakpoint, step over and into them. Itâ€™s also possible to inspect objects in
the right pane.
Version 0.4 will be released within the next two weeks, but
installing the preview wonâ€™t hurt and you have the debugger and better logging.
Uninstalling en re-installing new versions in FireFox is really easy (I did it
a few times to compare the new features)
FireBug (at Mozilla) https://addons.mozilla.org/firefox/1843/
View Source Chart https://addons.mozilla.org/firefox/655/