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.

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):

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!)

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)

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!

meta

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 206 other subscribers

Email Address

About

AMIS is internationally recognized for its deep technological insight in Oracle technology. This knowledge is reflected in the presentations we deliver at international conferences such as Oracle OpenWorld, Hotsos and many user conferences around the world. Our AMIS Technology Blog, the most referred Oracle technology knowledge base outside the oracle.com domain. However you arrived here, we appreciate your interest in AMIS. Link to our Google+ Profile AMIS