I regularly use FireBug in Firefox my for my JavaScript debugging. Back in the mozilla days I would just enter javascript: in the address bar and get the nice dialogue that shows to tell me the location of the error. We can all agree we have come a long way. Now that Firebug is also in Chrome we have another tool. I admit I do not bother with JS debugging in IE much, but I have pressed F12 a few times in the app to get up the dev tools.

So to put it short I could not do as good of a job as the guys over at alistapart.com. Check out what they have to say about debugging in JS “after the jump”:

“When used effectively, JavaScript debuggers help find and squash errors in your JavaScript code. To become an advanced JavaScript debugger, you’ll need to know about the debuggers available to you, the typical JavaScript debugging workflow, and code requirements for effective debugging. In this article, we’ll discuss advanced debugging techniques for diagnosing and treating bugs using a sample web application.”

http://www.alistapart.com/articles/advanced-debugging-with-javascript/

What is Firebug?

Firebug is a free add-on for Mozilla FireFox. It can be installed from https://addons.mozilla.org/en-US/firefox/addon/1843. Once it is installed it is launched by clicking the little “bug” in the lower right corner of FireFox. The bug will turn Orange to indicate it is enabled. Here you can see it turned “off”:

Why Firebug?

What can FireBug do for you that will help with your development? The most obvious feature is that is allows you to inspect the HTML code. While in this mode you hover over items on the webpage you are viewing and the code the generated these User Interface items will be shown. This is helpful when trying to diagnose misplaced elements on a page or when looking for the Cascading Style Sheet class that a particular UI element implements.

You can edit the Cascading Style sheets inline. By clicking the CSS tab at the top of the firebug window you can actually edit the CSS and make changes. These changes will be immediately reflected in the browser window.

The NET option allows you to see how long each request took to perform and the details of that request. This allows you to see all POST, GET, and other NET request sent down the http pipeline. You can tell what is being passed and how long it is taking. What is really important to me right now is being able to see the request and response headers. This tells me the authentication method I am using for my SData work in JavaScript.

The script tab helps if you need to debug your JS code. You can step through your code by placing a breakpoint to the left of the line of code that you want to break on. You can step through the code using the menu options in the upper right of the firebug toolbar.

How have I found it to be most useful?

When working with ATOM result sets like those received from a GET to an SData feed Firebug allows you to look right into the resulting XML. This makes traversing the DOM a bit easier since you can see where you are at in the structure. In previous days we would alert or print the elements while looping which was time consuming to say the least.
Internet Explorer 8 ships with a set of developer tools as well which rival what we use firebug for nearly every day. I guess since the days of the javascript: console in Mozilla it was hard to not use FireFox when it comes to client side code. Perhaps I will take a look at the IE tools in a future post.