1 前言

在之前的文章中我们系统地阐述了基于浏览器的网络资源请求方式，了解了资源传递的大致过程。今天就让我们借助浏览器的开发者工具更加详细地了解这一过程，以便在日后利用爬虫进行数据采集时能够精准定位到我们所需要的资源（数据）。

2 浏览器开发者工具

开发者工具主要是给程序员特别前端开发人员使用，利用开发者工具我们能够更加清楚地了解到浏览器与服务器之间的数据传输。

在之前 Python 基础(二)前端知识中我们了解了前端网页的基础构成，知道了网页由 HTML 作为基础，辅以 CSS 实现各种样式，加上 JS 实现各种复杂的交互渲染特效和功能。

我们可以通过在浏览器中右键检查打开开发者工具，也可以利用快捷键 Fn+F12（或 F12）打开（这里以谷歌浏览器作为演示）,让我们打开浏览器开发者工具来体验一下它的强大功能吧。

打开开发者工具

3 开发者工具常用功能

Elements: 允许我们从浏览器的角度看页面，我们可以看到 chrome 渲染页面所需要的 HTML、CSS 和 DOM(Document Object Model) 对象。此外， 还可以编辑这些内容更改页面显示效果。

例如，一些网上的查询成绩截图都可以通过修改页面从而修改得到我们想要的结果。

Elements

在页面右边是对网页源代码的前端样式的分解格式化显示，我们可以通过他们更加便捷地变更某些元素的样式，我们编写爬虫程序一般用不到，因此了解一下即可。

我们可以通过 Element 界面左上角的箭头对我们的页面中的元素进行定位，通过点击箭头图标指向我们网页的相关元素，单击选中的区域（元素），可以快速跳转到目标元素所对应的网页源代码位置。

定位网页元素

[拓展]
Python爬虫基础(三)网络传输协议中我们详细讲述了URL，我们可以通过URL定位网络上资源的位置，那么理论上如果能够得到对应资源的URL，那么我们就可以定位到资源并进行下载。

利用上述方法我们可以定位油管视频的封面图片：

定位网页上的资源

双击 Element 中对应的 URL 链接，在浏览器地址栏粘贴链接打开，我们可以看到视频的封面图片，同样的对于一些视频资源我们也可以利用这种方式进行定位下载。

查看地址对应资源

---

Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。

点击 Network，利用 CTRL+R 刷新重载页面。我们可以看到许多类型的文件，XHR、JS、CSS 等，我们可以进行选择查看我们所需要的文件类型。由于文件是按照加载顺序显示的，我们也可以通过单击 name 让浏览器按名称排列文件。

查看文件

在 Network 中，可以查看到从我们在浏览器输入 URL 到页面被加载出来，浏览器和服务器进行的资源传输，例如加载的 CSS 样式、JS 脚本以及 HTML 文件等。浏览器在和服务器网络传输中获得这些文件，并对获得到的文件进行解析展示将网页呈现在我们面前。

对上图中各列进行解释：

名称	含义
Name	请求的名称
Status	响应的状态码
Type	请求的文档类型
Initiator	请求源
Size	请求资源的大小
Time	发起请求到获得响应所用时间
Waterfall	请求的可视化瀑布流

[补充]
Status—状态码，我们可以利用状态码来判断服务器响应状态，例如我们常见的 404，一般是指服务器找不到指定网页，也说明我们请求发送失败。

Not Found

常用状态码的分类归总：

状态码	含义
1XX	告知请求的处理进度和情况
2XX	请求成功
3XX	表示需要进—步操作
4XX	客户端错误
5XX	服务器错误

回归正文，任意点击其中一个文件我们可以看到浏览器与服务器传输该文件相关细节。

文件详细信息

Header 面板列出资源的请求 url、HTTP 方法、响应状态码、请求头和响应头及它们各自的值、请求参数、服务器相关信息等等

Header 面板

Preview：预览面板，用于对请求到的资源进行预览

Preview 面板

Response：原始响应信息，包含还未进行格式处理的内容

Response 面板

Timing：资源请求的过程所花费时间

Timing 面板

Cookies：资源传输过程中的 Cookie

Cookies 面板

---

Source：在 Source 面板可以查看当前网页的所有源文件

Source 面板

以上仅仅介绍了爬虫开发过程中常用的部分，对一些不常用的部分进行了省略描述。其实开发者工具对于前端开发来说作用很大，但对于爬虫开发而言，只需熟悉上面所说的几个面板即可。