Frost's Blog
1319 字
7 分钟
Chrome开发者工具指北
2020-06-10

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

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

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

image-20200610100929539

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

image-20200610101110639

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

预备知识:HTTP 请求过程#

image-20200610105753662

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

  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 面板能看啥#

image-20200610114145824

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

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

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

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

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

查看请求详情#

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

image-20200610115840043

如果列表已经太多内容可以点击清空按钮clear button清空当前列表。可以看到comment请求方法是POST,已经返回 200 成功了。点选这条记录,可以在右侧看到请求响应的详情:

image-20200610121445910

从上到下依次是:

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

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

Network 的其他强大功能#

image-20200610121833101

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

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

Footnotes#

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

Chrome开发者工具指北
https://frostming.com/2020/06-10/f12-network/
作者
Frost Ming
发布于
2020-06-10
许可协议
CC BY-NC-SA 4.0