Chrome开发者工具指北

Chrome Dev Tools，Chrome 开发者工具，俗称 F12。其实不仅在 Chrome 上有，基本上所有的现代浏览器都带这个工具。它是调整样式、调试 JS、查看前后端收发数据的不二神器。

在 Chrome 浏览器中呼出 F12 有三种方法：

1. 右上角三个点按钮调出菜单——更多工具——开发者工具(Ctrl + Shift + I)
2. 顾名思义，键盘快捷键F12一键呼出
3. 在页面元素上右键点击——审查元素，或者叫检查

呼出以后会显示在页面的下方，如果觉得这样太扁不方便看信息，可以点右上角三个点的按钮调整布局，分别是新窗口打开、靠在左侧、靠在下方，靠在右侧：

可以看到工具的顶栏有很多标签：本文先介绍最常用也是最重要的「Network」页，其他标签将在后续文章中介绍。

预备知识：HTTP 请求过程

这是浏览器和后端服务器之间的数据流动示意图

1. 浏览器和服务器之间可能隔了千山万水，相互之间的数据交换必须由 HTTP 请求——响应完成（图中箭头）
2. 一个页面中包含的 HTML, CSS, JavaScript 均由浏览器这边处理，后端（Django）统统不认识这些文件，当成普通文本看待。
3. 请求体是浏览器生成给服务器读的，响应体是由服务器生成给浏览器读的，只是这个响应体可能是 HTML 页面、可能是文件、可能是 JSON 而已。

而浏览器和服务器之间传送了什么数据，对于排查问题是非常有用的，Network 在这里就相当于路口的监控，进来了谁，出去了谁，一目了然。如果请求的数据是对的而行为不正确，那肯定是服务器的问题；反之如果发的数据就是错的，那就是页面的问题。这样一下就可以把排查的范围缩小一半。所以不要再出了问题一个劲盯着无关的地方大眼瞪小眼。F12 打开先看监控，OK?

一个 HTTP 请求主要包含以下部分：

1. Method: 请求的方法，是 GET 还是 POST 或者其他
2. URL: 请求的地址，可能还包含 URL 参数（形如?key1=value1&key2=value2)
3. Headers: 请求的头部，包含一些请求的元数据。
4. Body: 请求体，发送的请求内容

而一个 HTTP 响应主要包含以下部分：

1. Headers: 响应的头部，包含一些响应的元数据。
2. Body: 响应体，返回的响应内容

Network 面板能看啥

打开 Network 面板，然后刷新页面，可以看到当前页面发送的所有请求，其中大部分是加载静态文件

• Method: 请求方法
• Status: 返回的状态码
• Size: 响应大小，如果是带"cache"字眼说明没有请求到后端，而是从缓存中获得的1
• Time: 载入耗时

从这个列表，加载了哪些文件，是否有加载失败，加载耗时如何都一目了然。有了这些信息能做的事情就多了：

• 分析页面响应速度的瓶颈，优化渲染速度
• 查看与后端通信成功情况，方便 Debug
• 查看页面的数据来源，以便仿造请求，爬虫利器

而上图中高亮的类别可以精细过滤请求类型，XHR 是专门查看 Ajax 请求的，JS, CSS, Img 则可以分别查看这些静态文件的加载情况。

查看请求详情

举例来说，比如现在我开发了博客的评论功能，想知道发送评论是否正常工作。那么打开 Network 面板，在页面中添加一条评论并提交，在 Network 中就应该能看到一条请求的记录，为防止页面刷新记录丢失，可以勾选上 Preserve 框：

如果列表已经太多内容可以点击清空按钮

清空当前列表。可以看到comment请求方法是POST，已经返回 200 成功了。点选这条记录，可以在右侧看到请求响应的详情：

从上到下依次是：

• General: 请求总体信息，URL，Method，返回状态码等
• Response Headers: 响应头
• Request Headers: 请求头
• Request Body: 请求体，如果是 form 表单则显示发送表单的内容

这样你就可以知道浏览器发了什么给服务器，又从服务器收到了什么内容。

Network 的其他强大功能

在请求记录上右键点击可调出菜单，可以做很多事情。比如在新标签打开、清除浏览器缓存/Cookies、将连接复制为 PowerShell 脚本、fetch 调用、curl 命令等等。

此外在 Network 面板中按CtrlF，可以搜索某个具体的数据内容，是在哪一个请求中返回的，这无疑对写爬虫有巨大帮助。

Footnotes

1. 这就是为什么更新了后端静态文件没有生效的原因。解决方法很简单：CtrlF5可以强制刷新，或者在 Network 面板右键点击该文件的记录然后选择"Clear browser cache" ↩