chrome--浏览器调试工具详解

版权声明:本博客大部分文章均为原创文章,转载请标明出处哟,可以关注我个人公众号获取数据和代码~ https://blog.csdn.net/qq_27056805/article/details/86383032

chrome浏览器开发调试工具打开方式:F12键

一,常用面板介绍

面板
1.定位小箭头按钮(左边第一个):
选中Elements面板,并启动该按钮,可以在页面中定位相应元素的源代码位置,或者选择源代码位置可定位到页面相应的元素。
2.手机-PC视图切换按钮(左边第二个):
启动该按钮,网页可以在pc网址网页和手机网址网页之间进行转换。由于在爬虫过程中,爬取手机网址网页相对来说更容易,所以可以通过该按钮将网页切换至移动网页实现更快速爬取操作。(例如新浪微博)
3.Elements面板
该面板显示了渲染完毕后的全部HTML源代码,在使用selenium爬取网页时可通过这些源代码找到各标签的位置,属性等特征。更重要的是,双击html源码或者右侧的css,可以更改网页外观,即可以对静态网页进行调试。
4.Console面板
该面板用来显示网页加载过程中的日志信息,包括打印,警告,错误及其他可显示的信息等。同时它也是一个js交互控制台。
console
上图显示了百度首页的console面板信息,该信息来源于执行请求下来的js文件所得。每条信息的右侧显示了信息的来源的js文件及具体的行数。同时最下边个人写了一条简单的输出信息,输出“这是数据小丸子”。
更为重要的一个功能是:ctrl+shift+F在该面板中能够唤起全局搜索功能,即可以在所有下载的资源中搜索目标信息,这点对于关键字查找是非常重要的。
5.Sources面板
该面板以站点为分组,存放着请求下来的所有资源(html,css,jpg,gif,js等)。正是因为该面板存放了所有的资源,因此在调试js时,目标代码都是在此处寻找的。
该面板也提供了调试按钮工具。
6.Network面板
Network面板记录了网络请求的详细信息,包括请求头,响应头,表单数据,参数信息等等,只要是做爬虫的这个面板必须要了解。
network
红色圆圈内代表的是请求的不同类型的数据,其中XHR表示ajax请求,即异步请求,在爬虫中最重要的是分析该项。Doc表示的是html文档类型。其他几个不是很重要不详细讲解。
若要保留请求记录,勾选上preserve log选项。

其他几个面板在爬虫过程中使用不是很多,故不再讲解。

猜你喜欢

转载自blog.csdn.net/qq_27056805/article/details/86383032