用Chrome Developer Tools 调试javascript

调式环境：

MyEclipse6.5 + Google Chrome 15.0.874.106

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

index.jsp:

<!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

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跳到下一个断点处

posted @ 2011-12-29 11:33 大鱼大鱼阅读(419) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

大鱼大鱼

用Chrome Developer Tools 调试javascript

公告