Chrome Developer Tools 调试javascript

调式环境：

MyEclipse6.5 + Google Chrome 15.0.874.106


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

index.jsp:

[html] view plaincopyprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>Javascript debug</title>  
  5.     <script type="text/javascript" src="main.js"></script>  
  6.   </head>  
  7.   <body>  
  8.    <input type="button" value="clickme" onclick="test()" />  
  9.   </body>  
  10. </html>  

main.js

[javascript] view plaincopyprint?
  1. function test(){  
  2.   
  3.     var x = 1;  
  4.     var y = 4  
  5.     var z = x+y;  
  6.       
  7.     alert(z);  
  8.       
  9. }  


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 @ 2012-08-19 22:34  ansionchen  阅读(201)  评论(0)    收藏  举报