您的位置：首页 > Web前端 > JavaScript

Chrome Developer Tools 调试javascript

2012-08-19 22:34 155 查看

调式环境：
MyEclipse6.5 + Google Chrome 15.0.874.106

1、在MyEclipse中新建一个web project ，新建一个main.js，文件结构如图

index.jsp:

[html]
view plaincopy print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Javascript debug</title> <script type="text/javascript" src="main.js"></script> </head> <body> <input type="button" value="clickme" onclick="test()" /> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Javascript debug</title>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<input type="button" value="clickme" onclick="test()" />
</body>
</html>

main.js

[javascript]
view plaincopy print ?

function test(){

var x = 1;
var y = 4
var z = x+y;

alert(z);

}

function test(){

var x = 1;
var y = 4
var z = x+y;

alert(z);

}

2、将项目部署到tomcat中，启动tomcat

3、打开chrome 输入网址http://localhost:8080/js_debug/index.jsp，访问该页面

4、F12 启动 Developer Tools 调试工具，点击Scripts按钮，会看到main。js代码

5、在左边栏数字单击，设置断点，然后回到index.jsp页面，刷新，点clickme按钮，触发test（）函数，程序将会停在断点处

6、鼠标放到变量上，可以看到变量现在的值，F11跳到下一条语句，Shift+F11
跳出本函数，F10 跳到下一个函数，F8跳到下一个断点处

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航