V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hongchaodeng
V2EX  ›  程序员

深入浅出:巧用 Chrome DevTools 进行网络请求调试

  •  2
     
  •   hongchaodeng · 2022-12-22 11:54:52 +08:00 · 2994 次点击
    这是一个创建于 463 天前的主题,其中的信息可能已经有所发展或是发生改变。

    作者:吴楷鹏,He3 核心研发: https://he3.app/

    开发者常常依赖 Chrome DevTools 来分析和优化网络请求。这个工具伴随着开源浏览器内核 Chromium 被包括了 Edge 、Opera 、QQ 浏览器和 360 浏览器等常见浏览器所采纳和提供。在这篇文章中,我们将介绍 Chrome DevTools 中的 网络面板 (Network) 功能,并提供一些有用的技巧来帮助您优化网络请求。

    1. 查看资源来源

    在资源面板查看文件时,Reveal in Network panel 可以定位资源属于那个请求:

    2. 过滤请求

    点开后可以根据 Fetch/XHR 、JS 、CSS 等等选项请求过滤请求:

    按住 <kbd>Ctrl</kbd> (Mac 用 <kbd>Command</kbd>) 进行点击可以多选,比如同时过滤 JS 和 CSS 类型的文件:

    同时提供 Filter 输入框,可以根据输入的名称进行筛选,当然,你也可以写正则表达式,比如用 /(css|js)$/ 来同时筛选出 css 和 js 文件:

    前面加个短横 - 还可以取反:

    3. 保存所有网页请求

    刷新页面所有请求都会重置掉,这对调试接口非常不方便,因为我们经常需要做前后请求对比,打开保存日志( Preserve Log )选项,将网页请求记录一直保存下来。

    4. 禁止缓存

    缓存对用户体验来说非常重要,但对开发来说非常不需要。打开禁止缓存( Disable Cache ),拒绝所有缓存。

    5. 网页加载截图

    网络面板提供了网页加载截图, 方便你查看网页一步步的加载过程:

    6. 禁止某些请求

    在分析网页性能的时候,可以通过禁止某些请求来做控制变量法:

    这个方法只能单个单个禁止请求,Chrome 还提供了个根据模板禁止请求,首先 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>( Mac 用 <kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> )运行命令菜单( Run command ),搜索 Show Network request blocking 并运行它:

    比如禁止所有 CDN 文件,可以这样写: https://cdn.heighliner.cloud/*

    在这里插入图片描述

    这里虽然叫做模板( Pattern ),但是并不能用正则表达式,只能用通配符(*),弱鸡的 Chrome 。

    7. 模拟网络情况

    大多数情况下,浏览器会发起畅通无阻的网络请求,但某些场景下我们希望它们不畅通且有阻。

    节流( Throttling )处可以控制网络的快慢,默认提供快速 3G 、慢速 3G 、离线( Offline )。

    当然你也可以进行自定义,其实无非就是控制下载( Download )、上传( Upload )和延迟( Latency )的值。

    8. 查看 Load 事件

    网络面板有多个地方展示 DOMContentLoadedload 事件的时间点,蓝线对应 DOMContentLoaded 事件,红线代表 load 事件。

    话说 Chrome 这里有个 BUG ,暗黑模式和明亮模式下颜色表现不太一致。

    在这里插入图片描述

    9. 查看请求情况

    在分析一个网站性能时候,有几个总数据值得参考。

    第一个是网站总的请求数量,这里显示为 33

    第二个是传输的资源大小,这里为 731kB

    第三个是传输过来的资源解压之后的大小,这里为 1.9MB

    打开 Use large request rows ,可以详细看到每个请求解压前后的资源大小。

    在这里插入图片描述

    10. 分享请求

    前后端接口联调对线的时候,经常需要查询接口详情,扔一两张截图或许方便但不够详细,HARHTTP Archive )是一种基于 JSON 格式的存档文件,你可以把所有 HTTP 请求下载成 HAR 文件:

    扔给对方导入:

    11. 清理网络请求

    一键重置网络面板所有记录,还你干净如初。

    想要了解更多?

    欢迎大家关注我们公众号定期推荐有趣的开发者工具,也欢迎大家加入我们微信群一起讨论和交流:

    17 条回复    2022-12-23 12:01:41 +08:00
    jiang24gdufs
        1
    jiang24gdufs  
       2022-12-22 14:14:57 +08:00   ❤️ 3
    学到了, 补充一个: 右键 replay XHR, 可以重新发送一个网络请求, 对于接口联调时重新发送请求时不用返回页面重新操作
    iluolSNS
        2
    iluolSNS  
       2022-12-22 14:18:40 +08:00
    感谢分享
    Dxxxxs
        3
    Dxxxxs  
       2022-12-22 14:23:24 +08:00
    学到了
    corcre
        4
    corcre  
       2022-12-22 14:29:27 +08:00
    Recorder 也可以看一下, 比 Capture screenshots 的信息要详细
    hua123s
        5
    hua123s  
       2022-12-22 14:43:35 +08:00
    学到了
    SSSinLee
        6
    SSSinLee  
       2022-12-22 14:53:11 +08:00
    感谢 lz 分享。

    @jiang24gdufs 这个也很实用!
    iyaozhen
        7
    iyaozhen  
       2022-12-22 14:56:26 +08:00
    其实我一直想问,Preserve Log 后看不见之前 response 了,怎么办
    xavierskip
        8
    xavierskip  
       2022-12-22 15:23:44 +08:00
    我想知道一下,下面这种情况应该怎么利用 Chrome DevTools 来记录网络请求。

    点击一个页面元素,打开一个新页面,这个元素不是一个 url 链接,而是通过 js 来打开的新页面,某些情况下找到这个 js 打开的 url 比较困难,而且打开的新页面里地址栏里的 URL 是经过转跳的,而且很可能不是一次两次,那么如何记录这之间经过的网络请求呢? 一种情况下是 js 生成的 URL get 一个 html 文件,html 里面再由 js 脚本控制转跳到页面,中间可能还有一些网络请求。

    要知道需要提前打开 Chrome DevTools 才会开始记录请求,但是我不能等到新标签页面打开后才再打开 Devtools 进行记录。
    xingguang
        9
    xingguang  
       2022-12-22 15:26:56 +08:00
    @jiang24gdufs 以前我也知道有这个功能,但是自从某个版本之后这个功能找不到了,很奇怪
    dorothyREN
        10
    dorothyREN  
       2022-12-22 16:56:09 +08:00
    @xavierskip #8 你可以先 F12 打开控制台,然后再打开网页
    xavierskip
        11
    xavierskip  
       2022-12-22 17:01:12 +08:00
    @dorothyREN #10 除非你找到那个 url 是多少。这个是 js 控制的,你不清楚是 get 请求或者 post 甚至是其他的。毕竟在页面上显示的链接一般都是 `javascript:void(0);` 这个找的过程有时候挺麻烦的。
    DingJZ
        12
    DingJZ  
       2022-12-23 09:55:58 +08:00
    @xavierskip #8
    不知道这个能不能满足你的需求, 每次开新页面的时候自动打开
    DingJZ
        13
    DingJZ  
       2022-12-23 09:57:23 +08:00
    我擦图片怎么挂了
    DingJZ
        14
    DingJZ  
       2022-12-23 10:01:13 +08:00
    dragondove
        15
    dragondove  
       2022-12-23 11:43:42 +08:00
    @jiang24gdufs 终于有这个功能了吗,火狐之前的 edit and resend 很方便。火狐现在还能生成 fetch 到 console 里,希望 chrome 也能跟进。
    xavierskip
        16
    xavierskip  
       2022-12-23 11:57:53 +08:00
    @DingJZ #12 感谢,确实可以,是这个功能!
    xavierskip
        17
    xavierskip  
       2022-12-23 12:01:41 +08:00
    @dragondove #15 edge 的 DevTools 有 编辑并重新发送 的功能,但是 chrome 没有。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3604 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 04:38 · PVG 12:38 · LAX 21:38 · JFK 00:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.