Tuesday, January 27, 2009

How to debug JavaScript in .NET?

Latest Microsoft visual studio 2008 is providing an option to debug javascript.
In earlier versions of Microsoft visual studio 2003 or 2005, we need to externally place debug option in javascript code.

Example:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Demo1</title>
<script type="text/javascript" language="javascript">
function clk1(obj)
{
debugger
alert(obj.value);
}
</script>


</head>
<body>
<input type="button" value="Hi" onclick="clk1(this);" />

</body>
</html>

In above html content, we can find “debugger” in javascript function.
At the moment when this clk1 () function is called and control is at debugger line, we get an option in browser to choose the debugging editor.
Output:-
As soon as I click on the button, which is calling the javascript function that I am wishing to debug.



Now I am selecting to choose new instance of visual studio 2005 or I can even continue in same visual studio editor where I am writing my source code.

It highlights the line where debugger is placed.



From now debugging is same as how we do in code behind page. i.e;
F10 key to goto next line and donot go into the child function
F11key to got next line and also into the child function
Cntrl + Alt + Q for quick watch of an object.
F5 to continue to next debugger, if next debugger not found continue execution.
Etc…

We get plus sign over there after placing near to the object, which I can expand and investigate in detail for each attribute, text etc…




Note:-
When you try to debug, we should also check whether browser supports to debug javascript.
For this
If it is Internet explorer then
1) Go to “Tools”.
2) “Internet Options” – “Advanced” tab.
3) Uncheck the check box which is saying “Disable script debugging”.




No comments: