爬虫必备工具，掌握它就解决了一半的问题

学号：17021211195

转载自：https://mp.weixin.qq.com/s/M-DUXKW7snmky4ui2IEzOg

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

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

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

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

嵌牛鼻子：网站爬虫

嵌牛提问：爬虫是什么？

> 查看网页源代码

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

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

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

> Elements

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

Elements 有几个功能：

选择元素：通过鼠标去选择页面上某个元素，并定位其在代码中的位置。

模拟器：模拟不同设备的显示效果，且可以模拟带宽。

代码区：显示页面代码，以及选中元素对应的路径

样式区：显示选中元素所受的 CSS 样式影响

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

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

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

> Network

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

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

抓什么

怎么抓

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

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

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

点击“搜索”功能，直接对内容进行查找。

选中 Preseve log，这样页面刷新和跳转之后，列表不会清空。

Filter 栏可以按类型和关键字筛选请求。

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

并不是所有 URL 都能直接通过 GET 获取（相当于在浏览器里打开地址），通常还要考虑这几样东西：

请求方法，是 GET 还是 POST。

请求附带的参数数据。GET 和 POST 传递参数的方法不一样。

Headers 信息。常用的包括 user-agent、host、referer、cookie 等。其中 cookie 是用来识别请求者身份的关键信息，对于需要登录的网站，这个值少不了。而另外几项，也经常会被网站用来识别请求的合法性。同样的请求，浏览器里可以，程序里不行，多半就是 Headers 信息不正确。你可以从 Chrome 上把这些信息照搬到程序里，以此绕过对方的限制。

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