Transcript Debugging JavaScript With Visual Studio

Debugging JavaScript
with Microsoft Visual
Studio
Maura Wilder
Software Engineer/Architect at Teradata
Email: [email protected]
Blog: squdgy.wordpress.com
Twitter: @squdgy
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.
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
Getting Started: create a project

Create new empty web site, even if you’re going
to debug an external web application.
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.
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.
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.

Debugger Windows
Solution Explorer
 Source Window
 Output Window
 Locals
 Watch
 Call Stack
 Immediate Window

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

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
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
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

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.

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.
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)
