Firebug for Firefox is an invaluable tool for debugging Javascript. And when you're writing code that uses the Prototype library, the code usually works the same in both Firefox and Internet Explorer, so can use Firebug to debug your Javascript. But for regular, non-Prototype Javascript code, and the occasional Prototype function that isn't completely browser independent, you may need to debug Javascript code from Internet Explorer to get it to work correctly. Fortunately it's pretty simple to do this, although it's not easy to find how to do this.
For Internet Explorer 8, Microsoft has bundled some developer tools. Click Tools then Developer Tools. Functionality is somewhat similar to Firebug, more similar to Chrome's developer tools, but not quite as good.
For Internet Explorer 6 or 7, you must install other tools to debug. Before you can start debugging, you will need either Visual Studio or Microsoft Script Editor. If you don't have Visual Studio, you can download the Microsoft Script Editor from Microsoft at http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&displaylang=en. From Script Editor, you can do just about everything that you can from Visual Studio, including viewing the call stack, setting break points, stepping through code, setting variables to watch, etc.
Once you have Visual Studio or Script Editor installed, from Internet Explorer, click Tools, then Internet Options. (if you're using IE7 and the menu bar is hidden, press ALT to show it). From this window, click the Advanced tab, and then uncheck "Disable script debugging (Internet Explorer".
Once you click OK here, go to the page that you wish to debug from. Then click View, Script Debugger, Open (again if you're using IE7 and the menu bar is hidden, press ALT to bring it up).
After this another window will open up asking which debugger you wish to use. Click on the one you wish to use (either Script Editor or Visual Studio), and click Yes.
If you use Script Editor, the HTML for the page you are on will be displayed. This typically doesn't help you debug the Javascript because your Javascript is probably in another file. But by default there is no window to select other files! To show the file selection window, simply click Debug, Windows, then Running Documents.
This will open up a window on the left listing all of the loaded Javascript and HTML files. Just double click on the file that your code that you wish to debug is in. Now you can set a breakpoint on a line by clicking in the gray area directly to the left of the code (or click Debug, New Breakpoint), and when you do something from the web page that will cause this Javascript to run, the Script Editor will pause execution from that line, allowing you to inspect values, view the call stack, step through code, etc. If you want to debug code that runs when your document loads, you can add the line debugger; to your Javascript, which will cause the debugger to automatically open up when the page is loaded.
While this capability isn't as comprehensive as Firebug (no viewing of requests, times, etc.), it certainly serves the purpose of allowing you to debug Javascript code from within Internet Explorer.
2 comments:
The original blog post was about debugging Javascript in IE6 and IE7, I've added a sentence describing how to do it in IE8. I haven't checked out IE9 yet but I assume they're still including Developer Tools like IE8 has.
As a follow up to this, if you're running Vista (like the official Microsoft IE7 VM), the first time you launch IE after installing the script debugger, you'll get a warning in the background about mdm.exe needing access. Check to always trust this application, and click Allow.
Post a Comment