如何通过Chrome DevTools或扩展选择性限制单个资源的网络速度？

当然可以！Chrome DevTools本身就支持针对单个或一类资源设置网络限速，甚至不需要额外扩展，下面我给你详细讲几种可行的方法：

这个方法最简单，适合快速测试单个或同类型资源的加载情况：

• 打开Chrome DevTools（快捷键F12或Ctrl+Shift+I），切换到Network标签页。
• 如果你想限制所有CSS资源，在顶部的过滤框输入*.css，就能筛选出所有CSS文件；如果只是单个文件，直接在资源列表里找到它就行。
• 右键点击目标CSS资源，在弹出的菜单里选择Throttle request，然后可以直接选预设的限速配置（比如Slow 3G），或者点击Add custom profile自定义速度（比如设置下载速度50kbps、延迟100ms）。
• 刷新页面后，目标资源就会按照你设置的速度加载，其他资源不受影响。

如果需要批量匹配特定类型/域名的资源并应用限速，可以用DevTools的网络规则功能：

• 打开DevTools，点击右上角的齿轮图标进入Settings，切换到Experiments标签，确保Network Request Rules已启用（勾选后需要重启DevTools）。
• 回到Network标签页，点击顶部的Rules按钮（在过滤图标旁边）。
• 点击Add rule，在规则配置面板里：
  • Match部分：选择URL matches，输入正则表达式.*\.css$来匹配所有CSS文件（你也可以改成其他规则，比如特定域名的资源）。
  • Action部分：选择Throttle，然后从下拉菜单选预设限速，或者点击Add custom throttle创建专属的速度限制。
• 保存规则后，刷新页面，所有符合匹配条件的资源都会自动应用限速，其他资源保持正常速度。

如果DevTools原生功能满足不了你的需求（比如需要定时限速、多规则组合等），可以试试这些扩展：

• Requestly：支持创建多种规则，匹配特定资源类型、URL或请求头，然后设置限速、重定向、修改参数等操作，界面友好，功能非常全面。
• ModHeader：除了修改请求头，也能设置网络限速规则，适合需要同时调整请求头和限速的场景。

内容的提问来源于stack exchange，提问作者Exocomp