R爬虫必备基础—Chrome开发者工具(F12)

上一期介绍了SelectorGadget的使用，当时提及需要搭配浏览器开发者工具使用。今天呢，就来介绍浏览器开发者工具，这里以Chrome浏览器为例。Chrome开发者工具中，主要功能页面是：元素（ELements）、控制台（Console）、源代码（Sources）和网络（Network）。在爬虫实践中，ELements 和 Network面板比较常用。

• 元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。

• 控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。

• 源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。

• 网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。

• Performance 对网页进行性能的分析。

• Memory 进行内存的分析。

• Application 当前页面上的所有用到的资源信息。

• Security 调试当前网页的安全和认证等问题。

• Audits 对网页优化给出的建议。
  

1、元素（Elements）

查看元素代码：点击箭头进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置 ，如下图，左侧即为网页源码。

右上部：

1. Style css的预处理器，可见既可得。直接更改css样式在界面中可以直观的看到效果。点击具体位置之后，跳转到Sources位置，这个不影响源文件。如演示的样子，可以在Sources查看更改的历史。

2. Computed 选中的元素盒子模型样式属性的具体计算值

3. Event Listeners 元素绑定的事件

4. Properties 元素具有的属性与方法，比直接查api会更方便。

右下部：

当鼠标移到右下部界面上的时候，元素边框会有各种颜色，代表的其实是分别是盒子模型中的内容（content）、填充/内边距（padding）、边框（border）、边界/外边距（margin）。这是css中非常重要的思维模型。

2、控制台（Console）

控制台的作用：查看JS对象的及其属性；执行JS语句；查看控制台日志：当网页的JS代码中使用了console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉。

3、源代码（Sources）

主要功能介绍如下：

4、网络（Network）

Netwok面板总览

Network面板功能介绍（如下图）：1. Controls控制Network的外观和功能; 2. Filters控制Requests Table具体显示哪些内容; 3. Overview 显示获取到资源的时间轴信息; 4. Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名就可以查看该资源的详细信息。

其中，各个功能区域中常见的功能键说明如下，请求URL可进行筛选和分类，选择不同分类,查看请求URL,方便查找。也可以直接Filter搜索查询相关URL，可以输入关键字或者正则表达式进行查询。

请求资源面板

如下图，Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，包括请求了哪些地址、每个URL的网络相关请求信息：URL，响应状态码，响应数据类型，响应数据大小，响应时间等。

• Name：资源名称已经URL路径（main.css）

• Status：Http状态码

• Type：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)

• Initiator：标记请求是由哪个对象或者进程发起的（请求源）

• Parser ：请求是由页面的html解析时发送

• Redirect：请求是由页面重定向发送

• script ：请求是由script脚本处理发送

• other ：请求是由其他过程发送的，比如页面里的Link链接点击

• Size：从服务器下载的文件和请求的资源大小，若是从缓存中取得资源则该列会显示“from cache”

• Time：请求或下载的时间，从发起Request到获取到Response所用的总时间

• Waterfall：显示所有网络请求的可视化瀑布流（时间状态轴），点击时间轴，可查看该请求的详细信息

某一具体资源

如下图，查看具体某一资源的详情，点击某个资源的Name可查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样。

重点：请求文件具体说明，一共分为四个模块（爬虫发送请求参数）：

• Header(重点)：面板列出资源的请求url、HTTP请求方法、HTTP状态码、请求头和响应头及它们各自的值、请求参数等

• Preview：预览面板，用于资源的预览。

• Response：响应信息面板包含资源还未进行格式处理的内容

• Cookies：显示资源HTTP的Request和Response过程中的Cookies信息

• Timing：资源请求的详细信息花费时间

①Headers：查看资源HTTP头信息，列出资源的请求URL、HTTP方法（GET/POST...）、HTTP状态码、请求头和响应头以及它们各自的值、请求参数等等。

• General 中关键信息：

• Request URL：请求网址；

• Request Method：请求方法(GET/POST/HEAD/PUT/DELETE等)；

• Status Code：HTTP状态码(显示200表示响应正常，通过 Status 能判断发送请求是否得到后台服务正常响应)

• Response headers(响应头)中关键信息：Content-Type：网页的解码方法

• Request headers(请求头)中关键信息：都重要

• Query String Parameters：都重要

②Preview.查看资源预览信息，可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应的预览信息。

③Response.查看资源HTTP的Response信息， 可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response相应内容。

④Cookies.查看资源Cookies信息，如果选择的资源在Request和Response过程中存在Cookies信息，则Cookies标签会自动显示出来，可查看所有的Cookies信息。

 ⑤Timing.分析资源在请求的生命周期内各部分时间花费信息，可显示资源在整个请求生命周期过程中各部分时间花费信息，可能会涉及到如下过程的时间花费情况：

• Queueing：排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）
  

• Stalled：从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间
  

• Proxy Negotiation：与代理服务器连接的时间花费
  

• DNS Lookup：执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话，则这个时间为0
  

• Initial Connection / Connecting ：建立连接的时间花费，包含了TCP握手及重试时间
  

• SSL：完成SSL握手的时间花费
  

• Request sent：发起请求的时间
  

• Waiting (Time to first byte(TTFB)) ：是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。TTFB这个部分的时间花费如果超过200ms，则应该考虑对网络进行性能优化了
  

• Content Download：获取Response响应数据的时间花费

往期回顾

长按识别二维码，关注"YJY技能修炼"