DCSIMG
Using Firebug extension - Ran Wahle's blog

Ran Wahle's blog

Using Firebug extension

Before Visual Studio 2008 there wasn't many decent client debugging tools.
One of the tools that were already (and for free) was the Firebug extension Firefox
for Firefox.

Firebug provides, among it's many features an in-browser script debugger
which consists some basic debugging features such as break points, step 
into functions, watches of local and global variables, automatic variables
and so on...

 

Script debuggingFirebug

Like in VS-2008, you can actually debug your client scripts. the main difference is
that you can stay on the browser and not even have to open Visual Studio for
that meter. All you have to do is go to the script tab, click on the script
resource being debug (third tab on the top).
and reveal the list of scripts. Clicking the selected row will reveal the client
script produced there.
image

There clicking on a row will create a breakpoint, from there on - you can go with
the usual F10, F11 and F5 buttons we al familiar with...

image

Error counter

Moreover, one of it's best debugging features, provided also out of the  Firefox
Error-Consoleimage is the client error list.  It displays an error counter and provide
links to the relevant line by clicking on the specific error. 

 

 



Scripts error console

Script source

Net transport

Like Fiddler tool, Firebug provides also a list of all page related requests with the raw data being
sent and received from the server. The difference between these two tools is that
Firebug provides only page-related requests, meaning that the list is being cleared on
every page replacement.
Viewing net transport 

You can press the expand button (from this tab and from the console tab)and see headers, parameters or post data, and response:

Viewing net transport from console tab
Note: In order to see that response you'll have to press a button, that's because firebug didn't
want the performance penalty of processing each response on the browser and on firebug.

Client script profiling                                  

One of it's latest services is the script profiler, all you have to do is click "Profile" at the top and
click it once more to stop profiling. When you've first clicked, a console record is created and when
you've second clicked, the record is expanded to provide a profile report as seen in the picture below.
 

Firebug Profiler


however, this tool is not perfect

JavaScript is many time a headache, using firebug won't  solve it, at least not completely
. Moreover, sometimes it will add it some headache of it's own. For example -
if you're using multiple tabs you will see sometime scripts from another tab.
Although a major performance improvement regarding performance, firebug is still a
debugging tool and therefore it slows your page loading process.

It's user interface is much less convenient that Visual Studio, for example the collapsible list
of the script resources to debug. It's DOM inspector and CSS editor are far less effective than
other tools available and so on...

 

In conclusion

Need a tool for script debugging, especially  if your targeted audience has multiple browsers
and you need your client script to be the closest you can to the standards? you may use
Firebug.
Need to review a web application client performances, need to track down errors easily -
Firebug may be your answer.
However, if you've developed an IE only application , Firebug may not worth the overhead
of making it standard.

On the other hand, it will suit you best if you're developing a web application that should
support almost all browsers (where it's better to develop for Firefox and test on other
browsers). It's is best for AJAX developers because of it's joined abilities of monitoring
your XHR transport and debug your script.

kick it on DotNetKicks.com

Comments

DotNetKicks.com said:

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# October 12, 2008 3:05 PM
Leave a Comment

(required) 

(required) 

(optional)

(required) 


Enter the numbers above: