Debugging JavaScript with Microsoft Visual Studio

1. Debugging JavaScript with Microsoft Visual Studio Maura Wilder Software Engineer/Architect at Teradata Email: maura@devpartners.com Blog: squdgy.wordpress.com Twitter: @squdgy

2. Assumptions • Audience has some knowledge of JavaScript • Audience has some knowledge of debugging terms and techniques • what a breakpoint is • what a call stack is • etc.

3. Outline • Getting started: creating a project and setting up Internet Explorer for debugging • Intro to the debugger windows • JavaScript debugging techniques, looking at the Microsoft Express web site • How to debug a local java web app (technique would work with any web app, PHP, Ruby etc.) • How to debug from a different version of IE from a Virtual PC • Questions and Wrap Up

4. Getting Started: create a project • Create new empty web site, even if you’re going to debug an external web application.

5. Getting Started: enable project debugging • Start the debugger and enable debugging in your project. • If IE is not your default browser, stop the debugger, and change your project to use IE.

6. Getting Started: enable IE script debugging • If you don’t already have script debugging enabled in IE, enable it. If it’s not enabled you will get an error message.

7. Debugging techniques • Visual Studio can be used to debug JavaScript on any web site, local or remote. • Once the debugger is loaded, it will load all referenced script resources, and show them in the solution explorer. • Try it: Start the debugger and visit any internet web site.

8. Debugger Windows • Solution Explorer • Source Window • Output Window • Locals • Watch • Call Stack • Immediate Window

9. Debugger Windows: Solution Explorer • When you debug a page, the VS debugger will load all referenced scripts in the solution explorer. • Includes eval’ed scripts • Includes inline scripts, within html • Double-clicking a script will show its source in the Source Window • Type ahead is available to quickly get to a desired JavaScript file

10. Debugger Windows: Source and Output Windows • Source: View JavaScript source code • Source: Set, clear, and disable breakpoints • Source: Hover over variables to see their value (when you have hit a breakpoint) • Output: See the output of runtime JavaScript exceptions

11. Debugger Windows: Locals and Watch • Locals: View and change the values of local variables • Locals: Drill into object properties • Locals: Access inspector popup windows • Watch: Choose to highlight a variable to watch, during execution – useful in loops

12. Debugger Windows: Call Stack and Immediate • Call Stack: View your position in the application • Call Stack: Go to another level in the call stack to view variables in that calling scope • Call Stack: See function names (when available) • Immediate: execute any JavaScript code, even to experiment to see what can be done • Immediate: view global variables, such as document and window • Immediate: change values in your code

13. Debugging from a Virtual PC - Why • What is a virtual pc? It’s software that allows multiple versions of Windows to run simultaneously on the same hardware. • Why debug in a virtual pc? To test multiple versions of IE without needing extra hardware. • Microsoft provides virtual pc Software and Hard Disk Images that come pre-loaded with versions of IE.

14. Debugging from a Virtual PC - How • Install Virtual PC software from Microsoft. • Download a Virtual Hard Disk Image that already contains the version of IE you want. • Set up and run a virtual machine that uses that virtual hard disk. • Install Web Developer Express in on the virtual machine. • If you need to debug something on the host machine, then you can’t use ‘localhost’, you need to look up the ip address of the host machine to use in URLs.

15. Relevant Links • Visual Studio 2010 Express • Virtual PC 2007 (for use on Windows XP) • Windows XP Mode and Virtual PC for Windows 7 • Virtual PC Hard Disk Images for IE6, IE7, and IE8, under XP and Vista • Blog post on setting up Virtual PC (on XP)