Chrome DevTools 深度技巧：8 个让你效率翻倍的「隐藏用法」
Chrome 浏览器对前端来说，是调试的核心战场——但大多数人只用了它 30% 的能力。
我们每天点 Network、打断点、调样式，但那些「好用却不为人知」的功能，才是提升效率的关键。今天分享 8 个我日常开发必用的技巧，每个都附「具体场景 + 操作细节 + 避坑提示」，帮你把 DevTools 用成「效率武器」。
1. document.designMode：浏览器里的「网页编辑神器」
一句话原理：让整个文档进入「可编辑模式」，所有文本节点都会变成「可修改状态」（类似 <div contenteditable="true">，但全局生效）。
具体用法 & 示例
只需在控制台执行一行代码：
document.designMode = 'on' // 开启编辑模式此时网页瞬间变成「可编辑状态」，你可以：
- 改文案：比如电商页面的「立即购买」改成「限时抢购」，演示给产品看效果；
- 调布局：比如把标题的「h1」改成「h2」（直接编辑文本节点的标签）；
- 截图素材：比如修改活动页的「倒计时数字」，截图用于 PPT 或宣传图。
注意事项
- 编辑后不要刷新页面，否则会恢复原始内容；
- 无法修改「不可编辑元素」（比如
<input disabled>），但可以先改disabled属性：javascriptdocument.querySelector('input').disabled = false // 解除禁用再编辑 - 关闭编辑模式：javascript
document.designMode = 'off'
2. Network 请求重放：再也不用反复点按钮
核心场景：接口偶现问题、需要多次验证同一请求时，避免反复操作 UI。
操作步骤（带示例）
假设你在调试「登录接口」，偶现 401 错误：
- 打开 Network → 切换到 Fetch / XHR 标签（过滤异步请求）；
- 找到目标请求（比如
POST /api/login）； - 右键 → 选择 Replay XHR（或 Replay Fetch）；
- 浏览器会原样重发请求（包含所有 header、cookie、body），结果会更新在 Network 面板。
高级用法
- 批量重放：选中多个请求，右键 → Replay XHR，适合测试接口幂等性（比如多次提交订单是否只生成一个记录）；
- 对比结果：重放前后的请求结果会保留在 Network 中，方便对比「成功」和「失败」的响应差异。
注意事项
- 重发请求时，cookie 和登录状态是复用当前页面的，所以如果登录过期，需要重新登录；
- 对于「非幂等接口」（比如提交订单），重放可能导致重复操作，需谨慎使用。
3. Local Overrides：前端本地 Mock 接口，不等后端也能开发
一句话原理：通过「本地文件覆盖」，让浏览器优先加载你修改后的接口响应，实现「前端独立开发」。
详细操作流程（附示例）
假设你需要模拟「商品列表为空」的场景：
- 打开 Network → 切换到 Overrides 标签；
- 点击「Select folder for overrides」，选择一个空的本地目录（用于保存修改后的文件）；
- 找到目标请求（比如
GET /api/goods），右键 → Save for overrides（浏览器会把请求的响应保存到本地目录）； - 打开本地目录中的响应文件（比如
goods.json），修改内容：json{ "code": 200, "data": [], // 改成空数组 "msg": "success" } - 刷新页面，浏览器会优先加载本地修改后的响应，UI 会显示「暂无商品」。
适用场景
- 后端接口未完成，前端先开发 UI；
- 模拟异常数据（比如
code: 500、msg: "服务器错误"）； - 测试边界情况（比如空数据、超长文本、特殊字符）。
注意事项
- 修改后的文件必须保存（Ctrl + S），否则浏览器不会生效；
- 如果接口有缓存，需要在 Network 面板勾选「Disable cache」（禁用缓存）；
- 跨域请求无法覆盖？可以配合 CORS Unblock 插件解决。
4. Copy as fetch：快速生成可修改的请求代码
核心价值：把 Network 中的请求转换成「可编辑的 fetch 代码」，方便修改参数后重发。
操作示例
假设你需要测试「不同用户的登录响应」：
- Network 中找到登录请求（
POST /api/login）； - 右键 → Copy → Copy as fetch；
- 粘贴到控制台，得到以下代码：javascript
fetch('https://example.com/api/login', { headers: { 'content-type': 'application/json', cookie: 'session_id=abc123', }, body: JSON.stringify({ username: 'admin', password: '123456', }), method: 'POST', }) - 修改
username为testuser，回车执行，即可测试新用户的登录响应。
高级用法
- 修改请求方法：比如把
POST改成GET，测试接口的兼容性； - 添加 header：比如加
Authorization: Bearer token，测试授权接口； - 保存为代码片段：将修改后的 fetch 代码保存到 Sources → Snippets，下次直接运行。
5. Network 过滤反转：只看你关心的请求
痛点：页面请求太多（埋点、静态资源、第三方接口），找不到业务接口？
操作步骤（带实用规则）
- 打开 Network 面板的过滤框（顶部搜索栏）；
- 输入过滤规则，勾选「Invert」（反转），即可排除不需要的请求。
看这滚动条，你懂我想说什么吧
实用过滤规则示例
- 排除静态资源：
-*.css -*.png -*.jpg -*.js（过滤掉样式、图片、JS 文件）； - 排除第三方接口：
-api.iconify.design -posthog.com -analytics.example.com（过滤掉图标、埋点、统计接口）； - 排除 OPTIONS 请求：
-method:OPTIONS（过滤掉预检请求）； - 只看业务接口：
/api（只显示路径包含/api的请求） + 反转排除其他。
我的常用示例： -.css -.png -.jpg -.png -.webp -.jpeg -.js -.svg -.gif -.ico -.woff2 -.eot -.ttf -.otf -.mp4 -.mp3 -api.iconify.design -posthog.com 前面是静态资源过滤，后面是非业务接口过滤。这样剩下的只有接口 PS 调试时记得取消过滤以免出现低级失误 ^_^
规则说明
-表示「排除」，+表示「包含」（默认）；- 支持通配符
*（比如*.png匹配所有 PNG 图片）； - 支持按「方法」过滤（比如
method:POST只看 POST 请求）。
6. $0：快速操作选中的 DOM 元素
一句话用法：在 Elements 面板选中 DOM 后，控制台用 $0 直接引用该元素。
实用示例
- 修改样式：比如把按钮改成红色（实时预览）：javascript
$0.style.backgroundColor = 'red' $0.style.color = 'white' - 获取属性：比如获取链接的
href或自定义属性data-id：javascript$0.href // 获取链接地址 $0.dataset.id // 获取 data-id 属性（<div data-id="123">） - 操作元素：比如让元素滚动到可视区域：javascript
$0.scrollIntoView({ behavior: 'smooth' }) // 平滑滚动
扩展技巧
$1：上一个选中的 DOM 元素；$2：上上个选中的 DOM 元素（最多到$4）；$$('selector')：等价于document.querySelectorAll（比如$$('button')获取所有按钮）。
7. Console Importer：控制台直接用 npm 包
核心场景：临时测试工具库（比如 dayjs、lodash），不用写 HTML 引入。
操作步骤
- 安装 Chrome 插件：Console Importer（从 Chrome 商店搜索安装）；
- 打开控制台，输入
$i('包名')，比如：javascript$i('dayjs') // 安装 dayjs $i('lodash') // 安装 lodash - 等待安装完成（控制台会提示
Imported dayjs (version x.x.x)）； - 直接使用：javascript
dayjs().format('YYYY-MM-DD') // 格式化日期 _.debounce(() => console.log('防抖'), 1000) // 测试防抖函数
注意事项
- 插件会从 unpkg.com 加载 CDN 资源，需要联网；
- 刷新页面后，安装的包会失效（临时使用）；
- 支持安装多个包（比如
$i('dayjs', 'lodash')）。
8. Ctrl + P：秒级定位文件并打断点
痛点：大型项目文件太多，找不到需要调试的文件？
操作步骤
- 打开 Sources 面板；
- 按 Ctrl + P（Mac 是 Cmd + P），弹出文件搜索框；
- 输入文件名（支持模糊匹配），比如
Home.vue或Button.jsx； - 回车直达文件，直接在代码行号旁点击打断点。
高级用法
- 路径别名：如果项目用了
@别名（比如@/views/Home.vue），直接输入@/views/Home即可定位； - 搜索代码片段：输入
function login，可以找到包含login函数的文件； - 快速跳转：定位到文件后，按 Ctrl + G（Mac 是 Cmd + G）输入行号，直接跳转到指定行。
总结：DevTools 是「效率放大器」
这些技巧的核心不是「冷门」，而是「把工具用对场景」——比如：
- 给产品演示用
document.designMode； - 联调用
请求重放和Local Overrides； - 调试 DOM 用
$0； - 找文件用
Ctrl + P。
DevTools 的能力远不止这些，但把基础功能用透，就能解决 80% 的调试问题。下次遇到问题，先想想：「Chrome 有没有现成的功能能帮我？」
最后，推荐几个配套工具：
- React DevTools / Vue DevTools：框架专属调试插件；
- Lighthouse：性能分析工具；
- Performance：性能 timeline 分析。
把这些工具组合起来，你会发现——Chrome 真的是前端的「第二个 IDE」。
- 本文链接：https://fridolph.top/posts/2025-10-16__chrome-devtools
- 版权声明：本博客所有文章除特别声明外，均默认采用 CC BY-NC-SA 许可协议。
