Chrome开发者工具，爬虫必备，解决一半的问题

网上爬虫的教程实在太多了，知乎上搜一下，估计能找到不下一百篇。你们乐此不疲地从互联网上抓取着一个又一个网站。但只要对方网站一更新，极可能文章里的方法就再也不有效了。

每一个网站抓取的代码各不相同，不过背后的原理是相通的。对于绝大部分网站来讲，抓取的套路就那么一些。今天这篇文章不谈任何具体网站的抓取，只来讲一个共性的东西：

如何经过 Chrome 开发者工具 寻找一个网站上特定数据的抓取方式。

（我这里演示的是 Mac 上的英文版 Chrome，Windows 中文版的使用方法是同样的。）

> 查看网页源代码

在网页上右击鼠标，选择“ 查看网页源代码 ”（ View Page Source ），就会在新标签页中显示这个 URL 对应的 HTML 代码文本。

此功能并不算是“开发者工具”一部分，但也很经常使用。这个内容和你直接经过代码向此 URL 发送 GET 请求获得的结果是同样的（不考虑权限问题）。若是在这个源代码页面上能够搜索到你要内容，则能够按照其规则，经过 正则、bs四、xpath 等方式对文本中的数据进行提取。

不过，对于不少异步加载数据的网站，从这个页面上并不能搜到你要的东西。或者由于权限、验证等限制，代码中获取到的结果和页面显示不一致。这些状况咱们就须要更强大的开发者工具来帮忙了。

> Elements

在网页上右击鼠标，选择“ 审查元素 ”（ Inspect ），可进入 Chrome 开发者工具的 元素选择器 。在工具中是 Elements 标签页。

Elements 有几个功能：

• 选择元素 ：经过鼠标去选择页面上某个元素，并定位其在代码中的位置。
• 模拟器 ：模拟不一样设备的显示效果，且能够模拟带宽。
• 代码区 ：显示页面代码，以及选中元素对应的路径
• 样式区 ：显示选中元素所受的 CSS 样式影响

从 Elements 工具里定位数据比咱们前面直接在源代码中搜索要方便，由于你能够清楚看到它所处的元素结构。但这边特别提醒的是：

Elements 里看到的代码不等于请求网址拿到的返回值 。

它是网页通过浏览器渲染后最终呈现出的效果，包含了异步请求数据，以及浏览器自身对于代码的优化改动。因此，你并不能彻底按照 Elements 里显示的结构来获取元素，那样的话极可能得不到正确的结果。

> Network

在开发者工具里选择 Network 标签页就进入了网络监控功能，也就是常说的“ 抓包 ”。

这是爬虫所用到的最重要功能。它主要解决两个问题：

1. 抓什么
2. 怎么抓

抓什么 ，是指对于那些经过异步请求获取到的数据，如何找到其来源。

打开 Network 页面，开启记录，而后刷新页面，就能够看到发出的全部请求，包括数据、JS、CSS、图片、文档等等都会显示其中。从请求列表中能够寻找你的目标。

一个个去找会很痛苦。分享几个小技巧：

• 点击“ 搜索 ”功能，直接对内容进行查找。
• 选中 Preseve log ，这样页面刷新和跳转以后，列表不会清空。
• Filter 栏 能够按类型和关键字筛选请求。

找到包含数据的请求以后，接下来就是用程序获取数据。这时就是第二个问题： 怎么抓 。

并非全部 URL 都能直接经过 GET 获取（至关于在浏览器里打开地址），一般还要考虑这几样东西：

1. 请求方法 ，是 GET 仍是 POST。
2. 请求附带的参数数据 。GET 和 POST 传递参数的方法不同。
3. Headers 信息 。经常使用的包括 user-agent、host、referer、cookie 等。其中 cookie 是用来识别请求者身份的关键信息，对于须要登陆的网站，这个值少不了。而另外几项，也常常会被网站用来识别请求的合法性。一样的请求，浏览器里能够，程序里不行，多半就是 Headers 信息不正确。你能够从 Chrome 上把这些信息照搬到程序里，以此绕过对方的限制。

点击列表中的一个具体请求，上述信息均可以找到。

找对 请求 ，设对 方法 ，传对 参数 以及 Headers 信息，大部分的网站上的信息均可以搞定了。

Network 还有个功能：右键点击列表，选择“ Save as HAR with content ”，保存到文件。这个文件包含了列表中 全部请求的各项参数及返回值信息 ，以便你查找分析。（实际操做中，我发现常常有直接搜索无效的状况，只能保存到文件后搜索）

除了 Elements 和 Network，开发者工具中还有一些功能，好比：

Sources ，查看资源列表和调试 JS。

Console ，显示页面的报错和输出，而且能够执行 JS 代码。不少网站会在这里放上招聘的彩蛋（本身多找些知名网站试试）。

但这些功能和爬虫关系不大。若是你开发网站和优化网站速度，就须要和其余功能打交道。这里就很少说了。

总结一下，其实你就记住这几点：

1. “ 查看源代码 ”里能看到的数据，能够直接经过程序请求当前 URL 获取。
2. Elements 里的 HTML 代码 不等于 请求返回值，只能做为辅助。
3. 在 Network 里用内容关键字搜索，或保存成 HAR 文件后搜索，找到包含数据的实际请求
4. 查看请求的具体信息，包括 方法、headers、参数 ，复制到程序里使用。

理解了这几步，大部分网上的数据均可以拿到，说“解决一半的问题”可不是标题党。

固然咯，提及来轻松几点，想熟练掌握，仍是有不少细节要考虑，须要不断练习。但带着这几点再去看各类爬虫案例，思路会更清晰。

若是你想要针对爬虫更详细的讲解和指导，咱们的“ 爬虫实战 ”课程了解一下，也有面向零基础的入门课程。

课程详情公众号（Crossin的编程教室）里回复 码上行动

════
其余文章及回答：

如何自学Python | 新手引导 | 精选Python问答 | Python单词表 | 区块链 | 人工智能 | 双11 | 嘻哈 | 爬虫 | 排序算法 | 我用Python | 高考 | 世界杯 | 竞猜 | requests

欢迎搜索及关注： Crossin的编程教室