爬虫工具篇 - Chrome 开发者工具

　　爬虫工具篇 - Chrome 开发者工具

　　点击上方“AirPython”，选择“置顶公众号”

　　第一时间获取Python技术干货！

　　题图：by thefolkpr0ject from Instagram

　　阅读文本大概需要 4 分钟。

　　在《论语》中，孔子提倡“学而不思则罔，思而不学则殆”的学习方法。我们再往深层面挖掘，“思”究竟是在思考什么？个人理解是思考并总结出一些共性的东西，即“套路”。有套路了，我们学习或工作会更加有效率。

　　当我们爬取不同的网站时，每个网站页面的实现方式各不相同，我们需要对每个网站都进行分析。那是否有一些通用的分析方法？我分享下自己爬取分析的“套路”。在某个网站上，分析页面以及抓取数据，我用得最多的工具是 Chrome 开发者工具。

　　Chrome 开发者工具是一套内置于 Google Chrome 中的 Web 开发和调试工具，可用来对网站进行迭代、调试和分析。因为国内很多浏览器内核都是基于 Chrome 内核，所以国产浏览器也带有这个功能。例如：UC 浏览器、浏览器、360 浏览器等。

　　接下来，我们来看看 Chrome 开发者工具一些比较牛逼的功能。

　　01元素面板

　　通过元素（Element）面板，我们能查看到想抓取页面渲染内容所在的标签、使用什么 CSS 属性（例如：class="middle"）等内容。例如我想要抓取我知乎主页中的动态标题，在网页页面所在处上右击鼠标，选择“检查”，可进入 Chrome 开发者工具的元素面板。

　　通过这种方法，我们能快速定位出页面某个DOM 节点，然后可以提取出相关的解析语句。鼠标移动到节点，然后右击鼠标，选择 “Copy”，能快速复制出 Xpath 、CSS elector 等内容解析库的解析语句。

　　02网络面板

　　网络（Network）面板记录页面上每个网络操作的相关信息，包括详细的耗时数据、HTTP 请求与响应标头和 Cookie，等等。这就是我们通常说的抓包。

　　其中的 Filters 窗格，我经常使用其来过滤出一些 HTTP 请求，例如过滤出使用 Ajax 发起的异步请求、图片、视频等。

　　最大的窗格叫 Requests Table，此表格会列出了检索的每一个 HTTP 请求。默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。

　　如果你觉得文章还不错，请大家点赞分享下。你的肯定是我最大的鼓励和支持。