VS 2008 JavaScript Debugging
page 3 of 5
by Scott Guthrie
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 25466/ 48

Script Document Navigation within the Solution Explorer

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. 

View Entire Article

User Comments

Title: Javascript debugging doesn't work on remote desktop   
Name: S Kumars
Date: 2009-05-11 7:51:50 AM
Javascript debugging doesn't work on remote desktop. We work on a remote desktop which is located at client location and while this debugging feature works absolutely fine at local machine in VS 08, it doesn't in remote desktop.
Can anyone tell why?
Title: Doubt in Javascript   
Name: lakshmi
Date: 2009-02-08 11:24:24 AM
hi i am lakshmi working as JuniorAssociate in SankaraSoftware, at present am working under C#asp.net(Visual Studio 2008)
i want to do validation that the textbox should accept only numbers by using javascript
i did all these validation in VS2005 but i am trying this in VS2008 but these validation is not working good
and i dont know why its not working....
can you tell me how to write javascript in VS2008 and how to assign javascript function to textboxes

its very urgent for me please help me sir.......... reply me as soon as possible

my email id is: lakshmi_ramanujam@yahoo.com

Thanks & Regards

Product Spotlight
Product Spotlight 

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2020 ASPAlliance.com  |  Page Processed at 2020-11-28 5:16:32 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search