Chrome Dev Tools，Chrome 开发者工具，俗称 F12。其实不仅在 Chrome 上有，基本上所有的现代浏览器都带这个工具。它是调整样式、调试 JS、查看前后端收发数据的不二神器。
在 Chrome 浏览器中呼出 F12 有三种方法：
- 右上角三个点按钮调出菜单——更多工具——开发者工具(Ctrl Shift I)
- 顾名思义，键盘快捷键F12一键呼出
- 在页面元素上右键点击——审查元素，或者叫检查
呼出以后会显示在页面的下方，如果觉得这样太扁不方便看信息，可以点右上角三个点的按钮调整布局，分别是新窗口打开、靠在左侧、靠在下方，靠在右侧：
可以看到工具的顶栏有很多标签：本文先介绍最常用也是最重要的「Network」页，其他标签将在后续文章中介绍。
预备知识：HTTP 请求过程
这是浏览器和后端服务器之间的数据流动示意图
- 浏览器和服务器之间可能隔了千山万水，相互之间的数据交换必须由 HTTP 请求——响应完成（图中箭头）
- 一个页面中包含的 HTML, CSS, JavaScript 均由浏览器这边处理，后端（Django）统统不认识这些文件，当成普通文本看待。
- 请求体是浏览器生成给服务器读的，响应体是由服务器生成给浏览器读的，只是这个响应体可能是 HTML 页面、可能是文件、可能是 JSON 而已。
而浏览器和服务器之间传送了什么数据，对于排查问题是非常有用的，Network 在这里就相当于路口的监控，进来了谁，出去了谁，一目了然。如果请求的数据是对的而行为不正确，那肯定是服务器的问题；反之如果发的数据就是错的，那就是页面的问题。这样一下就可以把排查的范围缩小一半。所以不要再出了问题一个劲盯着无关的地方大眼瞪小眼。F12 打开先看监控，OK?
一个 HTTP 请求主要包含以下部分：
- Method: 请求的方法，是 GET 还是 POST 或者其他
- URL: 请求的地址，可能还包含 URL 参数（形如
?key1=value1&key2=value2) - Headers: 请求的头部，包含一些请求的元数据。
- Body: 请求体，发送的请求内容
而一个 HTTP 响应主要包含以下部分：
- Headers: 响应的头部，包含一些响应的元数据。
- 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
- 这就是为什么更新了后端静态文件没有生效的原因。解决方法很简单：CtrlF5可以强制刷新，或者在 Network 面板右键点击该文件的记录然后选择"Clear browser cache" ↩
