Debugging DTX toolbars

Once your project is started you may need the help of a debugger program to get rid of some hard-to-find bugs. DTX is a cross-browser platform. This means you will be debugging in one particular browser and using the tools the browser offers for that. So far only IE and Firefox are supported. This tutorial will show you how to debug in each one of them.

Debugging in IE

You can debug a DTX toolbar in IE using Microsoft Visual Studio or Microsoft Script Debugger. The general idea is to run an instance of IE and then use the debugger to attach to the running instance. But first you need to make sure you have enabled Script Debugger for your IE. This is done in the Internet Explorer Preferences Dialog, in the Advanced Tab:

As shown in the picture, “Disable script debugging” must be unchecked for both “Internet Explorer” and “Other”.

Next run IE and make sure your toolbar is also running. It is a good idea to have only one instance of IE, this will help you to locate it later in the debugger.

At this point you can start Microsoft Visual Studio and select Debug > Attach To Process… or Tools > Attach To Process… from the main menu. A dialog like the following will appear:

Make sure that the “Attach to” field contains “Script Code”. This means you want to debug the JavaScript code running in IE, not the native code. Next, select the iexplore.exe process in the list below. This is the Internet Explorer process that is hosting your toolbar. Then, press the “Attach” button.

Visual Studio will load the current scripts in the Solution Explorer view. Your toolbar JavaScript files will appear under a node labelled “Script Documents”. Find your script file there, double click on it and you should be able to set breakpoints in the places you want to trace:

Another way to start the debugger is to add a “debugger” statement in your code. This acts like a breakpoint. As soon as the “debugger” statement runs, your debugger will show a dialog asking you for permission to start.

Debugging in Firefox

For Firefox debugging, we recommend the use of Firefox JavaScript Debugger (aka Venkman). Venkman has the ability to trace over files in Firefox’s UI, where the toolbars run.
Once you have added Venkman to your Firefox, you can launch it from the Tools > JavaScript Debugger option in the main menu. This will open Venkman’s interface.
First of all, you must be sure that “Exclude Browser Files” is not checked in Venkman’s Debug menu:

If this option was checked, you would not see your toolbar JavaScript files, since toolbar files are considered as Browser files.
Then you should be able to find your JavaScript file among the files listed in the Loaded Scripts panel. Double clicking on the file name will bring it into the Source Code view. There you can set breakpoints and trace the execution of your code line by line.