Debugging JavaScript with Microsoft Visual Studio

1
Debugging JavaScript with Microsoft Visual Studio

• Maura Wilder
• Software Engineer/Architect at Teradata
• Email maura_at_devpartners.com
• Blog squdgy.wordpress.com
• Twitter _at_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 youre 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 dont already have script debugging
  enabled in IE, enable it. If its 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 evaled 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? Its 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 cant 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)