码迷,mamicode.com
首页 > 其他好文 > 详细

2.4 chrome 开发者工具

时间:2016-08-26 18:15:11      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

开发者工具顶部有ElementsConsoleNetwork等八个栏目。常用的有三个:Elements,用来查看需爬取字段的HTML标签信息;Console,可以检测你的JS代码;Network,用来分析HTTP请求。

Sources调试使用

在左侧的脚本代码编号,鼠标点击即可添加断点,添加断点后,刷新网页,程序运行到断点即可看到断点调式的状态了,具体调试需要在自己想查看某个方法里边是否有问题,一步步排除,效果很好

技术分享

 

 

Resources

可以查看web程序跑起来后所加载的一些资源(Resources),包括图片或者其他“值”,以及Cookies

技术分享
 
 
 
 
 
 

NetWork

可以看到网页加载的脚本和资源的时间,还可以看到某些不能加载成功的资源;这里有位是百度首页演示,百度首页内容很干净所以不需要加载什么图片等资源

技术分享

 

 

tips:

谷歌浏览器建议使用Ctrl+R刷新页面,可以将修改的js和html代码无误快速更新 

2.4 chrome 开发者工具

标签:

原文地址:http://www.cnblogs.com/ericazy/p/5811350.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!