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

一,常用面板介绍

chrome ios调试 chrome调试器_chrome ios调试


1.定位小箭头按钮(左边第一个):

选中Elements面板,并启动该按钮,可以在页面中定位相应元素的源代码位置,或者选择源代码位置可定位到页面相应的元素。

2.手机-PC视图切换按钮(左边第二个):

启动该按钮,网页可以在pc网址网页和手机网址网页之间进行转换。由于在爬虫过程中,爬取手机网址网页相对来说更容易,所以可以通过该按钮将网页切换至移动网页实现更快速爬取操作。(例如新浪微博)

3.Elements面板

该面板显示了渲染完毕后的全部HTML源代码,在使用selenium爬取网页时可通过这些源代码找到各标签的位置,属性等特征。更重要的是,双击html源码或者右侧的css,可以更改网页外观,即可以对静态网页进行调试。

4.Console面板

该面板用来显示网页加载过程中的日志信息,包括打印,警告,错误及其他可显示的信息等。同时它也是一个js交互控制台。

chrome ios调试 chrome调试器_css_02


上图显示了百度首页的console面板信息,该信息来源于执行请求下来的js文件所得。每条信息的右侧显示了信息的来源的js文件及具体的行数。同时最下边个人写了一条简单的输出信息,输出“这是数据小丸子”。

更为重要的一个功能是:ctrl+shift+F在该面板中能够唤起全局搜索功能,即可以在所有下载的资源中搜索目标信息,这点对于关键字查找是非常重要的。

5.Sources面板

该面板以站点为分组,存放着请求下来的所有资源(html,css,jpg,gif,js等)。正是因为该面板存放了所有的资源,因此在调试js时,目标代码都是在此处寻找的。

该面板也提供了调试按钮工具。

6.Network面板

Network面板记录了网络请求的详细信息,包括请求头,响应头,表单数据,参数信息等等,只要是做爬虫的这个面板必须要了解。

chrome ios调试 chrome调试器_css_03


红色圆圈内代表的是请求的不同类型的数据,其中XHR表示ajax请求,即异步请求,在爬虫中最重要的是分析该项。Doc表示的是html文档类型。其他几个不是很重要不详细讲解。

若要保留请求记录,勾选上preserve log选项。

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