QuickWatch

Debugging Your JavaScript

UI Tips

QuickWatch

Debugging Your JavaScript

 

By Andrew Flick and Anthony Lombardo

 

In last month s article, Pop Ups, I promised to bring out Tony Lombardo as the author for this month s article. However, vacation and a heavy work load presented me with the opportunity to cover for Tony one more month and have the joy of bringing you another article. It s a shorter article because of the holidays, but still a good practice to know.

 

These past few months, I ve brought you a number of articles covering some really awesome tricks that involve a little bit of JavaScript code. However, after some thought, I realized that I never really offered you the same knowledge of how to debug a JavaScript application that I used in writing the articles.

 

As you know, authoring a Web application offers you the full power of the Visual Studio environment when debugging server-side applications. However, as a Web developer, you realize that not every scenario should be handled using a postback. There are many scenarios, some of which were portrayed as tricks in previous articles, that you would want to have taken care of using JavaScript on the client.

 

Some of the challenges you face include the limited IntelliSense support of JavaScript in the Visual Studio IDE. This poses a lot of challenges, especially since JavaScript is case-sensitive. Furthermore, using breakpoints inside your JavaScript code only has partial support. So, what is my proposed solution to the problem? My best friend in debugging JavaScript bugs is the QuickWatch window. This article hopes to highlight the use of this window and in turn help you debug your JavaScript-based applications.

 

Preparing to Use the Debugger

In IE 6.0, Microsoft empowered developers to use the debugger in debugging their JavaScript-based applications. Unfortunately, this doesn t work right out of the box. If it did, I m sure we d have a lot of annoyed users with frequent dialogs of IE wanting to debug a piece of buggy JavaScript. To turn on these debugging capabilities in IE and/or Firefox, check the settings in Control Panel | Internet Options | Advanced Tab | Disable Script Debugging (Internet Explorer for IE and other for other) and make sure the box is not checked. This enables script debugging, so select Apply and OK to enable this powerful feature.

 

Using the Debugger Method

To step through your code, simply use the debugger method in places that you may need to debug. If you need to debug your code at page load, simply add a function named load and have it called at the onload event for the body of the application:

 

function load()

{

   debugger;

}

 

After stepping through this function, you ll be presented with the Web page that holds this function. As you interact with items on the Web page requiring JavaScript, you will step through them as they are called.

 

You don t always have to debug your code from page load, though. Simply add the debugger method to any function in your JavaScript code to start debugging at that point.

 

Using the QuickWatch Window

OK, you now have the capabilities to step through your code, which is really great, but it would be even better if you had a way of analyzing the values given in your different JavaScript functions. Let s take a piece of code written to pop up a custom context menu in a previous article that I had written:

 

var oContext = window.createPopup();

function contextMenu()

{

      debugger;

      oContext.document.body.innerHTML = ContextMenu.innerHTML;

    oContext.show(event.offsetX + 5, event.offsetY, 200, 75,

    document.body);  

}

 

This code is missing the definition of the pop up and the location of where this method is called; however, it does provide us with a viable place to start debugging. If I highlight the text ContextMenu and then press Ctrl-Alt-Q or right-click and select QuickWatch, I am presented with the QuickWatch dialog.

 

This dialog allows me to drill into the ContextMenu object and find different values and figure out how everything is set. For instance, if I type the expression ContextMenu.InnerHTML, QuickWatch returns the expected value as found in the application.

 

This is a powerful tool for debugging your application. When used in conjunction with stepping through your JavaScript code, you will be able to find not only expected values for different objects in your application, but also delve directly into the document object model.

 

Additional Power in VS.NET 2005

In Visual Studio 2005, you are given additional power by adding the capability to drill down into the object model without opening QuickWatch. Simply hover over the object you wish to explore while debugging and you re blessed with a browse able tooltip.

 


This additional power is even more helpful when searching for a specific reason as to why a certain value may or may not be set not to mention it has less steps than opening the QuickWatch window, which is more productive.

 

Conclusion

With these few tips, you now have the capability of diving down to the object model and effectively debugging your application. These powerful tools are usually only known about on the server side, but now you can do the same thing on the client side. With that, I hope everyone had a Happy Holidays and I wish you some happy debugging.

 

Andrew Flick is Product Manager - NetAdvantage Windows Forms Technologies & TestAdvantage for Infragistics, Inc. Prior to joining Infragistics, Andrew played an avid role in presenting on emerging .NET technologies throughout the Midwest to a variety of User Groups as well as numerous Student Groups. As an active member of the INETA Academic Committee, Andrew has authored content on building successful User Groups, as well as numerous white papers on building an effective community. A Microsoft MVP, Andrew joined Infragistics in July of 2004 as a Technology Evangelist, where he was responsible for the creation of reference applications and authoring .NET technology articles for industry leading publications, as well as the world wide delivery of Infragistics Technology demonstrations. Andrew currently serves as Infragistics Product Manager for NetAdvantage Windows Forms Technologies & TestAdvantage. As product manager, he spearheads the product management and strategies of Infragistics Windows Forms Product Lines from establishing the direction through delivery. Working directly with the Director of Development, he sets the direction, plans, and manages product development. Contact Andrew at mailto:[email protected].

 

Anthony Lombardo is Product Manager of NetAdvantage - ASP.NET Technologies for Infragistics, Inc., and is responsible for spearheading product management and strategies for Infragistics ASP.NET product line, working directly with the Director of Engineering to set the direction, plan, and manage product development. Prior to joining Infragistics, Anthony served as a Network Administrator for North Brunswick Board of Education and worked for Rutgers University in their technical support division. Since beginning his career with Infragistics in 2000, Anthony has been involved with every aspect of the development cycle, including playing a key role in the creation of the Presentation Layer Framework for ASP.NET, assisting in the creation and implementation of Infragistics Visual Studio 2005 project plan, and determining the product feature set for NetAdvantage 2005 for Visual Studio 2005. Contact Anthony at mailto:[email protected].

 

 

 

 

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish