python小课堂30 - 爬虫之前必会的浏览器开发者工具

咪哥杂谈

python小课堂30

爬虫之前必会的浏览器开发者工具

本篇阅读时间约为 6 分钟。

1

前言

hello，大家好呀，本周六的时候写了一篇人口数据文章，发掘了一个挺有意思的网站，感兴趣的可以观光一下：有意思的人口时钟.

本篇要介绍的是开始学习爬虫之前必会的技能 - 浏览器自带的开发者工具，学会了浏览器开发者工具，才能更好的分析出网页相应的内容结构，以及如何使用开发者工具来找出网站中信息交互的请求接口地址。

PS：请求接口地址，小白可以理解为一个网页的地址。此地址是服务器（服务器可以看做配置高点的电脑）专门返回数据用的请求地址，比如我们在浏览器上输入一个地址，回车以后能看到浏览器上返回相应的网页，请求接口地址与之类似，只不过一般返回的都是格式化的数据信息，如 JSON。不懂 JSON 的详见：python小课堂25 - 你真的了解JSON嘛？

2

浏览器的选择

浏览器的选择，特意来说下对于分析爬虫元素的浏览器，笔者常用的3个，分别为：谷歌、火狐、360极速浏览器。

对于浏览器的选择，基本上只要除了微软的 IE 浏览器以外，其余浏览器都可以使用，因为 IE 自带的浏览器开发工具不太好用。这里推荐谷歌浏览器。但是作为讲解，笔者这里使用的是360极速浏览器，因为360的浏览器是双核的，既可以用 IE 内核，也可以用谷歌内核，在工作中兼容性较好，支持一些只有 IE 能访问的网页。可以放心的是下面讲解的截图虽然是360的开发者工具，但是与谷歌浏览器基本一样，安心观看啦。。。

PS：会了谷歌浏览器的开发者工具，其余浏览器同理。

3

浏览器的开发者工具准备

首先，打开浏览器随意进入一个网页，如百度，按下F12后可以看到下图所示：

也许你看到的框框和笔者的不一样，现在看到的框是默认吸附于浏览器的，笔者更习惯将开发者工具作为单独的一个页面呈现。笔者选择第一个按钮，可以调节如下：

4

浏览器开发者工具详讲

调整后，可以看到浏览器上面一排按钮，这里只为了爬虫介绍最常用的前四个按钮，元素（Elements）、控制台（Console）、源代码（Sources），网络（Network）：

标红的文字（元素、网络）是学爬虫前提必须掌握的选项卡，其余两个了解即可，以下按照掌握程度的优先级进行介绍。

1. 元素（Elements）

查看元素代码结构：点击如下图的箭头（或用者用快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置 。

举个栗子，比如想看百度热搜对应的 html 代码，只需要点击此箭头，选择你想查看的文本，鼠标左键点击后，方可在 Elements 中看到对应的 html 代码，如下：

根据文字找出对应代码块，是学习爬虫之前分析的必要阶段，当然这里交小白一个好玩的操作。我们可以对其页面内容进行修改，选中对应页面元素，双击即可修改文字，比如改为下面的：

当然，这里仅限于你不刷新的情况，一旦刷新了页面，其实又回到原来的热点新闻文字了，因为静态页面我们是可以用此方式修改的，若刷新页面，相当于重新请求了服务器一次，所以又变回原来的文字信息了。

2. 网络（Network）

点到 Network 选项卡，查看下面图片可以看到最常用的几个功能：

第二行的按钮可以根据网页资源进行网页监控的过滤：

比如选择XHR时，就是所谓的异步请求，比如我们常用的百度翻译，有时候不需要你点击翻译按钮，左侧写完英文后，右侧可以自动翻译出结果，就是因为使用了异步调用的请求方式，如下图：

对于爬虫来说，分析请求服务器的接口异常重要，就拿百度翻译为例，我们可以依次点击这四个请求依次查看其请求内容，直接以 v2tranapi 网页请求为例，先来看  Headers ：

其次是 Preview ：

Response ：

还有 Cookies ， timing ，此处详细介绍了，自行了解即可。爬虫必须掌握的就是对网页的分析，而分析网页的元素以及请求接口是学习爬虫之前必要的知识。

PS：多说一句，对于 Cookies 的相关信息，不要随意公布在网上给人看...！Cookies 涉及账号密码，会有安全问题，如果后续有机会，单独开一篇来讲下。

3. 控制台（Console）

控制台，类似 Pycharm 中的控制台，编写程序都需要用到控制台，目的是为了便于调试，点击如下，可以看到百度设置的招聘小彩蛋（各大厂都有...）：

了解即可，前端开发人员用到的较多，这里不多介绍了，有需要自己可以搜索相关知识....

4. 源代码（Source）

在源代码（Source）页面可以查看到当前网页的所有源文件,如下图：

在编写前端页面时，可以通过此项进行代码的调试，了解即可。

5

总结

本篇粗略的介绍了一下学习爬虫之前必须要掌握的技能，有些地方没有写的非常详细，笔者认为，F12 必会的就是 网页元素的选择 与 网络中分析接口 ，这两个是重点。

至于了解的知识点，大家可以自行百度，网上有许多优秀详细的文章，比笔者这里介绍的要详细得多，本篇目的只有一个，认准学习的目标，突出重点去学习。再次强调，浏览器开发者工具 F12 熟练掌握 网页元素 和 网络分析，后续学习爬虫才会懂得原理。

至此完！

---

长按关注

公众号名称：咪哥杂谈

一个咪咪怪的公众号

长按二维码关注哦！