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.
I’m using it for a few days and I really love it. Debugging Javascript the old
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)
<html>
<head></head>
<body>
<div id=”abc”/>
<script
type=”text/javascript”>
var abc=document.getElementById(“abc”);
</script>
</div>
</body>
</html>
Open the page and open the FireBug console (F12) and type abc
in it.
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
updated.
When you click the inspector tab and expand all the arrows
you see the current DOM-tree. Hovering above element will highlight them in
your page.
Changing existing pages is also possible. Visit google.com
and copy and paste the following lines (one by one):
document.firstChild.childNodes[1].firstChild.childNodes[1].width=770;
document.firstChild.childNodes[1].firstChild.childNodes[1].height=82;
document.firstChild.childNodes[1].firstChild.childNodes[1].src='http://www.amis.nl/gfx/headerbg.gif'
This will change the layout of google:
Analyzing
AJAX-traffic
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.
You can also inspect javascript objects. Use the inspect(x)
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â€)[0]) 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 [0].
$(“//tdâ€)[0] returns an object that can be used as an argument in the inspect
method.
$(“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
Logging
It’s also possible to have logging in your javascript. Just
add the following piece of code to you page:
function printfire()
{
if (document.createEvent)
{
printfire.args = arguments;
var ev =
document.createEvent(“Events”);
ev.initEvent(“printfire”,
false, true);
dispatchEvent(ev);
}
}
When you do printfire(‘Hello World!’); the text Hello World!
will be displayed in the FireBug console. Bye bye annoying alert boxes!
Error reporting
The Javascript console in FireFox works ok, but the one of
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
source!)
It’s also possible to expand and close blocks by clicking on
it.
Version 0.4 preview
I had some questions about FireBug and mailed the creator
(Joe Hewitt).
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)
Sources
FireBug http://www.joehewitt.com/software/firebug/
FireBug (at Mozilla) https://addons.mozilla.org/firefox/1843/
View Source Chart https://addons.mozilla.org/firefox/655/
Thanks, good to hear that it was useful. I changed abc into “abc”, thanks for noticing!
Jeroen,
Great article, very practical!
Just a little correction while reading, the test html file should read like this:
var abc=document.getElementById(“abc”);
Version 0.4 is released: http://getfirebug.com/
This really looks like a very good tool! Will JavaScript development now finally become a breeze? It seems that for doing AJAX style development – and really DHTML in general too – will benefit a lot from this FireBug plugin. Thanks for describing it Jeroen!
Yeah, I love Firebug. It makes me almost want to have errors in Javascript to be able to browse through the trees.