Debugging Javascript in IE

Debugging of javascript in IE is easy. This tutorial will guide you on how to debug your javascript in IE by using the IE developer tools.

Create a simple html page with javascript for debugging. Let’s call this file — test.html

<!DOCTYPE HTML>
<html>
<head>
<title>Debugging javascdript in IE</title>
<script>
function getValue()
{
	var x=document.getElementById("result");
	var total = 10 + 8;
	x.innerHTML = total;
}
</script>
</head>
<body>
Total value is <label id="result">???</label>
<h1 id="myHeader" onclick="getValue()">Click me!</h1>
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Debugging javascdript in IE</title>

function getValue()

{

var x=document.getElementById("result");

var total = 10 + 8;

x.innerHTML = total;

}

</script>

</head>

<body>

Total value is <label id="result">???</label>

<h1 id="myHeader" onclick="getValue()">Click me!</h1>

</body>

</html>

Open/drag the file from/to IE and your screen should look like the the following:
Press F12 or select Tools->Developer Tools from menu bar. The developer tool window should launch now.
Select the “Script” tab from the developer Tools window. You should see the content of the file now.
Setup a debug breakpoint at line #8 by clicking the left-most column of the line number 8.
Click the “Start Debugging” button on top top begin debugging.
Back to the main browser window and click “Click me!” now.
Notice that the debugging process should stop at the line #8 that we setup a break-point previously.
Select to “Watch” tab in the right pane of developer tools and add the objects/variables that we wanted to monitor. I’m added x and total.
Press F10 or to step over the javascript. You will notice that the value in x and total will be updated now.
To stop debugging, click the “Stop Debuggin” button.

Debugging Javascript in IE

2 Comments to Debugging Javascript in IE

Leave a Reply Cancel reply

Visual Studio Debugging in IE8

2 Comments to Debugging Javascript in IE

Leave a Reply Cancel reply