Monday, July 7, 2008

Simple ways to Debug client Javascript – part I.

JavaScript is used in millions of Web pages to add functionality, validate forms, detect browsers, and much more. Building of bigger and more complicated scripts, especially using DOM model or form field values can cause a lot of frustration and head pain. Moreover, JavaScript debugging is not Hassle free. However Visual Studio in-built feature helps us to debug client-side scripts.

Script Explorer is one of less known features of Visual Studio 2005. This great tool allows easily debug JavaScripts. This option will be hidden in Debug menu and appears only when the debugger is running.

Step 1:

- Open in Internet Explorer. Select Tools -> Internet Options -> Advanced tab.

- Deselect the following (make the checkbox unchecked):

o Disable Script Debugging (Internet Explorer).

o Disable Script Debugging (Other).

Step 2:

- Open Visual Studio, Run the Project [Go to Debug Menu and Click on start Debugging / Press F5].

- Go to Debug à Windows à Script Explorer or [Press Ctrl + Alt + N]

At this moment, A Script Explorer panel appears which displays the tree of active JavaScripts. At the first level are scripts that are imported from external sources or embedded in the page. By double-clicking on the selected script it will open in the main window.

It’s ready for debugging.

- You can Place Breakpoint in javascript functions,

- Step into the Code, Watch / Quick Watch the variables.

Happy scripting... :)