<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="fun.js"></script>
</head>
<body>
<button onclick="return simpleFunction();">Click me</button>
<ul id="testId"></ul>
</body>
</html>
and fun.js:
function simpleFunction() {
for (var i=0; i < 7; i++) {
var html = '<li>' + i + '</li>';
$('#testId').append(html);
}
return false;
}
Open test.html in Chrome. Open JavaScript console (Ctrl+Shift+J or Tools > JavaScript console) and switch to 'Sources' tab. Choose fun.js file as shown on the screenshots:
Put breakpoint by clicking on the line number you are interested:
Click on 'Click me' button on our page. JavaScript should be stopped on line 3 (our breakpoint):
By using debugger buttons we can step by step iterate through our script:
'Watch Expressions' panel allows us to add some expressions or variables and see their values:
It is very handy when we wont to see variables values which are out of the current scope.
After several iteration we can see the following picture:
There is another way when we can add breakpoint programmatically. It is useful in cases when javascript is inlined into html or we do wont the script stops at some specific place. Modify fun.js as follows:
function simpleFunction() {
for (var i=0; i < 7; i++) {
var html = '<li>' + i + '</li>';
debugger;
$('#testId').append(html);
}
return false;
}
'debugger' command says the browser to stop and switch to debug mode. Try to reload the page and see the following picture:
No comments:
Post a Comment