Debugging in Internet Explorer
Explorer. In order to be able to debug in Internet Explorer, you need to:
1. Start Internet Explorer and go
| Internet Options | Advanced and clear the Disable
script debugging (Internet Explorer) and Disable
script debugging (Other) checkboxes. If you want a pop-up window to be
displayed for each error, you need to check the Display
a notification about every script error checkbox, as shown:
debugging in Internet Explorer
2. Open the solution you want to
debug in Visual Studio.
3. Execute the project.
4. After the Internet Explorer
window opens, go back to Visual Studio.
5. Open the script explorer by
going to Debug
| Windows | Script Explorer. The script explorer will list the available
script files that can be debugged
Using the IE
6. Double-clicking a file in the
script explorer will open it in the editor. There you can place breakpoints
debugging server-side code.
Alternatively, if you have Visual Studio, you can attach
the debugger to an existing the Internet Explorer process by selecting Debug
| Attach to Process, and then choosing the Internet Explorer process
If Internet Explorer is configured for debugging and a
script error is encountered in the browser while no debugger is attached, you’re
prompted to choose one of the available debuggers:
Visual Studio and Visual Web Developer 2005
Microsoft Script Debugger (downloadable from Microsoft’s website)
Microsoft Script Editor (ships with Microsoft Office)
For more about debugging web applications in Visual
Studio, see these links:
Web Development Helper
Web Development Helper is a great tool developed by
Nikhil Kothari and should be used by every developer who needs the following
HTTP(S) traffic monitoring
Script errors and immediate window
Web Development Helper can
be downloaded from:
For more documentation about this tool, check the
When it comes to debugging, the tool offers nice
features such as showing the trace, catching run-time errors, and showing the
full call stack (including script URL, line number, and line of code). The Script
window allows entering custom script that is executed within the document
Internet Explorer Developer Toolbar
Microsoft offers the
Internet Explorer Developer toolbar as an option for exploring web pages. It is
especially useful for working with the page’s DOM element, CSS styles, cookies,
etc. It can be downloaded Microsoft’s web site.After it installs, you open it
through Tools | Toolbars | Explorer Bar | IE Developer
Explorer Developer Toolbar in action
It is worth mentioning that it doesn’t compete with
Nikhil’s tool, but it’s more like a complementary tool as it doesn’t offer
There are other other tools that are worth mentioning
and that you should keep an eye on:
Ø Damian Meher’s TraceJS is a tool that logs every line of
script executed in Internet Explorer. Find it at http://damianblog.com/2006/11/23/tracejs/.
Ø Julien Couvreur’s XMLHttpRequest
See http://blog.monstuff.com/archives/000291.html and http://weblogs.asp.net/bleroy/archive/2006/05/15/446532.aspx.
Debugging in Firefox
With the increasing number of users of Firefox, the
number of tools used for web development has grown as well.
First of all, Firefox offers an Error
Console accessible from the Tools
also has a built-in script evaluator within the document context, and the DOM
Inspector tool, which can be selected at installation time, so we can say that
the features packaged into Firefox are quite advanced in comparison with the
default features of Internet Explorer. Below figure shows the Error Console
signalling a typo in our code.
Console in Firefox
Firebug (http://www.getfirebug.com/) is a
Firefox plugin that offers almost anything a web developer could want from a
Debugging and profiling script
Monitoring HTTP traffic
Examining HTTP headers
Inspecting and editing the DOM
Inspecting and editing CSS
Quick search for filtering errors and messages
Delivering such a powerful set of tools in one free
product makes Firebug the perfect choice for debugging applications in Firefox.
Following figure shows Firebug in action.
is a powerful tool for debugging in Mozilla-based browsers (Firefox, Netscape,
debugging and profiling, full call stack, breakpoints, local variables, and
watches, all within an interface that is very similar to Visual Studio. See this
tool in action in figure below.
You can find a few excellent online articles for using
Similar to what Firebug and Internet Explorer Developer
Toolbar offer, Web Developer plugin (https://addons.mozilla.org/en-US/firefox/addon/60),
provides a most comprehensive set of tools for:
DOM information and inspection
Outlining different elements (frames, headings, tables, links,
Page validation (CSS, HTML, WAI, links, Section 508)
All in all, this extension
is a very good companion for developing websites. The homepage for this
extension and some documentation can be found at http://chrispederick.com/work/webdeveloper/.
When it comes to inspecting and tampering with the
HTTP(S) traffic from our computer and the Internet, the most popular tool you
can find is Fiddler. This is a freeware tool that allows inspecting all HTTP and
HTTPS traffic and tampering it, setting breakpoints, making it an ideal
candidate for debugging applications.
It also offers an event-based subscription system
offering the capability to easily extend it. Install Fiddler from http://www.fiddler2.com/Fiddler2/.
You can find a quick introduction to Fiddler on MSDN, and in the following
demonstration videos http://www.fiddler2.com/fiddler/help/video/default.asp
extensions development http://www.fiddlertool.com/fiddler2/extensions.asp
user interface http://www.fiddler2.com/Fiddler/help/ui.asp
There are a lot of testing tools available today, but
only few of them allow for automatic testing of AJAX applications. Dan Wahlin
has put together a list of automated testing and debugging tools on his weblog
In his article we can find some of the tools that we
presented so far, and also a comprehensive list of tools that we can use for
A less documented feature of Fiddler is that it can
generate Visual Studio WebTest files that can be using in Visual Studio. Why is
this necessary? Visual Studio doesn’t record AJAX requests based on
XMLHttpRequest, but only full postbacks.
In order to create a Visual Studio WebTest file, you
need to follow these steps:
Start capturing the traffic by pressing F12 or by
| Capture Traffic.
Browse the AJAX application and Fiddler will register the
After having finished the steps save the session by going to File|
Save | Session(s) | as Visual Studio Web Test.
Now you can import the generated file in Visual Studio and use it
for automatic testing.