chrome 开发者工具

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

Sources调试使用

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

Google Chrome开发者工具使用(图文教程)

Resources

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

Google Chrome开发者工具使用(图文教程)
 
 
 
 
 
 

NetWork

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

Google Chrome开发者工具使用(图文教程)

tips:

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

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