JavaScript Debugging in Firefox Using the Firebug Add-On

In this article we will discuss debugging JavaScript in Firefox by means of an add-on called Firebug (version 1.5.4).

If you need to debug JavaScript using Internet Explorer you can check out my blog post on using the Internet Explorer Developer Tools.

Aside from being able to debug JavaScript, Firebug also allows you to view HTML markup, CSS, inspect the DOM, monitor network requests, and much more.




For the purpose of this discussion we're only going to focus on the JavaScript debugging aspect of Firebug but I recommend exploring the other features in Firebug because many will prove useful in your day-to-day web development efforts.



Once you've installed the Firebug add-on there will be a small bug image in the status bar:

You can click on the bug image in the status bar to launch Firebug for the current window. You can also open Firebug by using the menu (Tools, Firebug, Open Firebug) or by pressing F12. The following is a screen shot of Firebug open in a window:

(click to view the image full size)

By default, Firebug opens as a pane at the bottom of which ever window had the focus. This is not always desired especially when trying to inspect a small pop-up window with limited space. You can open Firebug in its own window by using the menu (Tools, Firebug, Open Firebug in New Window) or by pressing Ctrl + F12.

The first time you launch Firebug, the information displayed will be the HTML markup of the page itself (the HTML tab). Since we wish to do JavaScript debugging, we need to switch to the Script tab as illustrated in the following image:


(click to view the image full size)

If you are following best practices for web development your JavaScript code should be located in a separate file.

 On the left pane's toolbar, in Firebug, is a drop-down menu that will show a list of all JavaScript files that are currently loaded for the page. Select the JavaScript file from the list that contains the code you wish to debug.


(click to view the image full size)

If you need to search the selected file for a particular item, you can do so by using the small search box in the top-right corner of Firebug:

(click to view the image full size)

Once you find the code that you wish to debug you can set a breakpoint by clicking in the margin or by right-clicking and choosing 'Set Breakpoint' from the context menu.

(click to view the image full size)

Note: Unlike Visual Studio and the Internet Explorer Developer Tools, you cannot set a breakpoint by pressing F9.


One nice thing about Firebug is that you don't have to tell it to start debugging. The next time the breakpoint is hit Firebug will take you to that line automatically. 


The Firebug toolbar contains some buttons to help with the stepping into, over, and out of code. You can also use keyboard shortcuts rather than the toolbar buttons (Step Into is F11, Step Over is F10, and Step Out is Shift + F11).

(click to view the image full size)



Another nice feature of Firebug is that you don't need to add a variable to the Watch window to see its value. You can simply hover the mouse over the value and see a tooltip. 



If you wish to add a variable to the Watch window you can do so by selecting the item, right-click on it, and then select 'Add Watch' from the context menu. You can also click in the watch window where the text 'New watch expression...' is and then type in the variable name.

(click to view the image full size)

And there you have it. Debugging JavaScript using the Firebug add-on within Firefox.

JavaScript Debugging with Internet Explorer 8

Sometimes having access to the Visual Studio IDE is not possible for debugging JavaScript in a web application.

One scenario could be that an issue is only presenting itself on a client machine and you're unable to reproduce the steps locally. Perhaps your JavaScript code is being dynamically generated preventing you from setting a breakpoint in your source JavaScript.

In the cases where the Visual Studio IDE is not an option for the debugging of JavaScript, being able to debug the JavaScript code directly in the browser is very helpful.

Internet Explorer 8 - Developer Tools

Internet Explorer 6 and 7 had access to an add-on toolbar known as the 'Internet Explorer Developer Toolbar.' The add-on toolbar allowed one to view HTML markup, CSS, inspect the DOM, and more.

As of Internet Explorer 8, the add-on toolbar's functionality is now built right into the browser and is now known as the 'Internet Explorer Developer Tools.'

To access the Developer Tools you can either click on the 'Tools, Developer Tools' menu item or you can press F12.

The F12 key is important to know when you need to inspect a pop-up window that does not have a menu bar.


For the purpose of this discussion we're only going to focus on the JavaScript debugging aspect of the Developer Tools but I recommend looking into the other features that are available because they can prove to be useful in your day-to-day web development efforts.

When you first launch the developer tools you will see a window displayed similar to this:

(click to view the image full size)

Since we wish to do JavaScript debugging, we need to switch to the Script tab:

(click to view the image full size)

By default, the information displayed is the markup of the page itself.

If you are following best practices for web development your JavaScript code should be located in a separate file.

To the right of the 'Start Debugging' button is a drop-down that lists all JavaScript files that are currently loaded. Select the JavaScript file, from the list, that contains the code you wish to debug.

(click to view the image full size)

Modern JavaScript files are no longer just a few lines and having the ability to search for a specific item in a file is very important. After a bit of searching, I realized the answer was right before my eyes. You will find a search box on the tab bar at the far right:

(click to view the image full size)

Once you find the code that you wish to debug you can set a breakpoint by clicking in the margin. You can also set the breakpoint by placing the cursor on a specific line and then pressing F9 or by right-clicking on a line and selecting the 'Insert Breakpoint' context menu item.

(click to view the image full size)

Now that you have the breakpoint set, you need to tell the Developer Tools that you wish to start debugging. You do this by clicking on the 'Start Debugging' button on the toolbar.


Once you start debugging, the next time your breakpoint is hit, the developer tools will bring you to that point allowing you to inspect variables and step through the code.

The toolbar contains some buttons to help with the stepping into, over, and out of code. You can also use keyboard shortcuts rather than the toolbar buttons (Step Into is F11, Step Over is F10, and Step Out is Shift + F11).

(click to view the image full size)

In order to view the contents of a value you can either switch to the Locals window or you can add the object to the Watch window.

You can switch to the Locals or Watch window by clicking desired button on the right-hand pane's toolbar

(click to view the image full size)

With the Watch window you can either click into the grid to add a new item by typing in the object's name or you can right-click an object in the JavaScript code and choose 'Add Watch' from the context menu.

(click to view the image full size)

You can tweak the values contained in the Watch window by double-clicking in the Value column as shown in the following screen shot:

(click to view the image full size)

And there you have it. Debugging JavaScript using Internet Explorer 8's built-in Developer Tools.

JavaScript debugging with Visual Studio 2008

As a web application developer there are times when it becomes necessary to debug JavaScript.

Up until Internet Explorer 7, it was simply a matter of placing a breakpoint in the JavaScript file and pressing F5 in Visual Studio.

Unfortunately, as of Internet Explorer 8 things changed and the Visual Studio debugger stopped working for pop-up windows.

I tried attaching to the iexplore.exe process using the Attach to Process dialog but had mixed results with the debugger not attaching most of the time.


I finally decided that I needed to figure out a way to get debugging of JavaScript to work with Visual Studio even for pop-up windows.

The Debugger Command

The first technique I discovered to achieve Visual Studio debugging of JavaScript in a pop-up window was the debugger command.

The debugger command only works in Internet Explorer and triggers the Just-In-Time debugger window of Visual Studio when the code execution hits the statement.

The following is an example of how the debugger command works:

(click to view the image full size)

The Just-In-Time debugger window will allow you to select an open solution or to open a new instance of Visual Studio as shown below:

(click to view the image full size)

Once in Visual Studio you can debug as per normal.

(click to view the image full size)

This is an interesting way to achieve debugging in a pop-up window but is not a method that I recommend.

If you do use it, I highly recommend that you create some sort of process to ensure the command doesn’t make it into production code (wrap it in some sort of debug statement that will be pulled from the release code or have a checklist of things to search for in the files to remove).


Although the debugger command was a bit of a breakthrough in achieving Visual Studio debugging of JavaScript code from a pop-up window of Internet Explorer 8, I felt there had to be a better way.

I knew that debugging worked for the main html forms when you press F5 in Visual Studio but it stopped working for pop-up windows.

Having examined the processes that were running when a pop-up window is displayed, I also knew that each window of Internet Explorer appeared to spawn a new process.

(click to view the image full size)

Attach to Process dialog

My first thought was that the process with the title of the pop-up window must be the one I need to attach the debugger to. As it turns out this was not the case and the process with the title is simply the last window to have the focus before I displayed the attach to process dialog.

Looking at the iexplore.exe processes and I noticed something.

When I start the web application in debugging mode, the process I attach to is 'Script' while the process with the title of the last window that had the focus only has the process type of 'x86'.

(click to view the image full size)

As it turns out, when attaching to a window in Internet Explorer to do JavaScript debugging, the processes you want to attach to are the ones with the type of 'Script, x86'. If you’re not sure which process you need to attach to, you can select all processes of type 'Script, x86'.

Summary

So in summary what appears to happen is that Internet Explorer 8 uses one process (x86) to control the browser itself. Each html window/tab is then given its own process (Script, x86).

You can cause an html page to trigger the Just-In-Time debugger of Visual Studio using the debugger command but I highly recommend against that approach due to the possibility of the command accidentally making it into production code.

To attach to a running process of Internet Explorer 8, simply use the Attach to Process dialog in Visual Studio and select the one or more iexplore.exe processes that are of type 'Script, x86' (IE 8 64-bit processes will be 'Script, x64').