Often the JavaScript that is sent down to a browser client
is dynamically generated on the server (for example: with scripts that
are stored as resources within compiled server controls - like ASP.NET
AJAX UpdatePanels and control extenders). In scenarios such as
these, you want to be able to easily see all JavaScript URLs being loaded from
a page, as well as step into the within the debugger.
VS 2008 makes it much easier to-do this by integrating the
running Script Document feature (that in VS 2005 was a separate tool-pane
window) into the VS 2008 solution explorer view when you are debugging a web
application.
Specifically, when you are using VS to run and debug a page,
VS 2008 will now list all of the script URLs that the page you are
debugging has loaded in the browser at the top of your VS solution explorer
pane:
Figure 3
You can then double click on any of the URLs under the
"Script Documents" node at the top to see the JavaScript
file that was loaded in the page:
Figure 4
You can obviously then set breakpoints in the loaded
JavaScript and debug everything.
Much Richer Debug Watch/Locals and Visualizer Support
Easily opening and navigating JavaScript files in the
debugger is nice - but the real meat of the improvements made with VS 2008
JavaScript debugging is in the much improved object execution and inspection support. When you inspect a variable within the debugger using VS 2008, you'll find much
more detailed object information is now available:
Figure 5
You can now browse runtime object methods:
Figure 6
You can now browse runtime object events:
Figure 7
And you now get much, much more detailed
property and property type information of running objects. Note below how
I am traversing the div element's "parentElement" property to
dynamically look up details about the element's parent HTML element
and overall position within the HTML DOM:
Figure 8
You can obviously use the debugger property
grid above to both lookup as well as set values. You can also run code in
the immediate window to retrieve and change JavaScript at runtime:
Figure 9
VS 2008 also provides support for pluggable debug
visualizers that you can use with JavaScript debugging. This enables
developers to add extensions to the debugger that can work against running
objects and provide richer visualization views of them. For example, we
could use the built-in "Text", "XML", or "HTML"
visualizer to load a dialog to better inspect a value:
Figure 10
Figure 11
I suspect we might see a cool CodePlex project providing
nice JSON and REST JavaScript visualizers soon.