As a software engineer, I'm always looking for new ways to improve my code and my productivity. In this never-ending search, I occasionally run across tools that make my job much easier and become part of my standard toolset.
Beginning JavaScript developers often rely on alert() statements to debug their code, telling them when the code's passed a specific point and maybe relaying some data. While alert() may work for small projects, it becomes counter-productive when you add any amount of complexity to your code. Not only does it interrupt the script as it's running, it can often fails to give you the information you need. You must also spend the extra time carefully removing the statements from your code before you move it to production.
That's where the Microsoft Script Editor comes in. It's a script debugger with the look and feel of Visual Studio, without the overhead (or cost) of VS. It is included in Office XP and 2003 and will completely revolutionize the way you develop JavaScript code.
The Office installation doesn't push a shortcut to the Microsoft Script Editor (MSE) to your Start Menu, so you will have to track it down for yourself. The file is named MSE7.EXE and can be found in %Program Files%\Microsoft Office\Office11 (replace Office11 with Office10 if you have Office XP instead of 2003). If a search of your hard drive doesn't turn up the executable, you're going to need to grab your Office installation CD. Once the installation begins, select the Advanced Install and make sure the following option is set to install: Microsoft Office -> Office Tools -> HTML Tools -> Web Scripting -> Web Debugging.
I threw together a little meaningless sample script just to highlight the main features that will affect you immediately. (I was going to post the code here directly, but Blogger isn't playing nice with my <pre> tag. If you're a coder, you're more than capable of throwing together a good example on your own.) You can see this code “in action” in the screenshot to the right. The MSE does a good job of syntax highlighting, but doesn’t every good editor in this day and age? We’re looking for a debugging tool, so let’s move on to the debugging functionality...
To add breakpoints to your code, just click in the gutter on the left next to the code on which you would like it to break. When you run the script, it will break every time you reach this point, so it’s a great way to get a look at how your code actually works behind-the-scenes. Once your breakpoints are in place, hit F5 to run the page in your browser.
To get the code running, I typed “Junk to display” in the text box and clicked the "Submit test string" button, which caused the SubmitTestDisplay() function to be called. As you can see, the MSE took control from the browser and paused the script’s execution at the breakpoint within the function.
Available to you are all the “standard” debugging tools: a list of the local variables that have been created or will be created in the current function, the call stack in case you’re not sure how to got to the currently executing code, and a watch pane so you can keep an eye on elements of your choosing. At this point, you can stop to examine the contents of data objects, step through the code manually, or continue execution, just as the case with any standard debugger.
With the increasing complexity of my JavaScript code with object-oriented programming and asynchronous communication between the server and the browser, the MSE has cut my debugging time by over half. Since most corporations have installations of Office already in place, you will likely find yourself with no cost incurred for this performance boost. And if yours doesn’t, the time savings from this tool can almost completely justify its purchase.
Thank you for reading this far. I realize this is a somewhat long article, but this is just a brief overview of the basic features of the MSE - there’s so much more it can do, including attaching to live Internet Explorer processes so you can debug scripts stored server-side (which I may go over at a later date). I encourage you to dig deeper as your projects grow to really take advantage of its power.
Happy coding!
Technorati Tags: JavaScript, Ajax, Debugging, Scripting, Microsoft, Internet Explorer, Microsoft Script Editor
