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
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...
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.
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...
Moreover, one of it's best debugging features, provided also out of the Firefox
Error-Console is the client error list. It displays an error counter and provide
links to the relevant line by clicking on the specific error.
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.
You can press the expand button (from this tab and from the console tab)and see headers, parameters or post data, and response:
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.
however, this tool is not perfect
. 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...
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
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.