爬虫工具篇之 Chrome 开发工具 Networks

发表于 | 更新于 | 分类于 ， ， | 阅读次数：

前言

此篇博文是笔者有关爬虫工具系列之一；

本文为作者的原创作品，转载需注明出处；

用例

以某网站为例，当我们在搜索框内输入某个关键词以后，便会返回查询结果列表，如下所述，
the page logic.png

那么下面，笔者将以这个用例作为介绍，如何通过 Chrome 的开发工具 Networks 来对其进行分析，

Networks

当执行完用例中的搜索，立即使用 Networks 工具第一次查看，会返回下面的信息，
networks-tool-first-look.png
默认情况下，只会显示出所有加载的文件，包括 js, css, 图片等等以及相应的加载时间；因为这些文件都是通过网络加载的，所以，其实每个文件就是一个独立的请求( 备注，HTTP 1.1 以后加入了长连接的概念既 Keep-Alive 模式，因此多个文件的请求可以复用同一个连接 )，当我们点击左侧的某个文件的时候，将会显示请求该文件的详细内容，
request-and-response details.png
如图，我们可以非常清晰的看到与文件 fonts.css 请求相关的 request 和 response 的详细信息；不过，这些目前不是我们想要关注的，我们所要关注的是，当点击“搜索”按钮以后，相关的行为状态；首先，从调用行为分析可知，当点击“搜索”按钮以后，页面并没有整体刷新，因此可以判断出，这是一个 Ajax 调用，因此，我们切换到 tab XHR；（备注，从这里可知，Networks 非常友好的将我们所要关注的所有请求类型进行了详细的分类，XHR、JS、CSS、Img、Media 等等）

XHR

XHR 是 Ajax 调用的底层协议；

当我们切换至 tab XHR 之后，并点击左侧的 result，注意，很明显，这“极有可能”不是对一个文件的请求，而是一次业务请求，因为 result 没有文件的后缀名，当然，如果某个文件本身就没有后缀名，那另当别论；我们将看到如下的内容，
networks-xhr-overview.png

可以看到，在 Tab Headers 部分，请求和反馈的 Header 包含四个部分，General、Response Headers、Request Headers 以及 Form Data；作为爬虫，在请求的过程中，我们关注的是 Request Headers 以及 Form Data 的部分

请求过程

Request Headers

1
2
3
4
5
6
7
8
9
10
11
12
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9
Connection:keep-alive
Content-Length:171
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:Hm_lvt_762a6cd324472973aa9934517a8ecb5a=1516760305; Hm_lpvt_762a6cd324472973aa9934517a8ecb5a=1516760670; AJYPFX_SESSION_ID=8522d9c1-6885-41cc-be14-a7751c944048
Host:www.chineselaw.com
Origin:https://www.chineselaw.com
Referer:https://www.chineselaw.com/basicSearch/search
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
X-Requested-With:XMLHttpRequest

请求过程中，尤其要注意三个要素

  • Referer
  • User-Agent
  • Cookie

上面三个参数若不给的话，在本地构建请求来提交 post 请求的话很容易会失败；

Form Data

Form Data 是 POST 请求所提交的表单数据，要注意的是，form data 是构建在 HTTP body 中进行传输的；

From Data
1
2
3
4
5
6
7
searchType:QWAL
pageNo:1
sortOrder:[]
query:[{"field":"all","cfield":"a","value":"a"}]
filter:[]
advs:[]
includeJcy:0

上述以 key:value 的形式构建了完整的 form data 数据；

view source
1
searchType=QWAL&pageNo=1&sortOrder=%5B%5D&query=%5B%7B%22field%22%3A%22all%22%2C%22cfield%22%3A%22a%22%2C%22value%22%3A%22a%22%7D%5D&filter=%5B%5D&advs=%5B%5D&includeJcy=0

上述便是 Http body 中的内容；

view URL encoded
1
2
3
4
5
6
7
searchType:QWAL
pageNo:1
sortOrder:%5B%5D
query:%5B%7B%22field%22%3A%22all%22%2C%22cfield%22%3A%22a%22%2C%22value%22%3A%22a%22%7D%5D
filter:%5B%5D
advs:%5B%5D
includeJcy:0

上述是经过 URL encoded 之后的内容；

反馈过程

可以看到，其反馈的内容是一串 JSON 字符串，

response-snapshot.png

总结

Chrome Networks 工具能够非常快捷方便的帮你检测出相应的请求调用和反馈过程的详细内容，能够非常方便的帮你构建出你的爬虫；