Chrome 浏览器，对前端来说几乎就是“第二个 IDE”。

我们每天都在用它看 Network、打断点、调样式，但说实话——DevTools 的能力，你可能只用了 30%。

有些功能并不冷门，只是没人系统地告诉你该怎么用； 但一旦你用顺了，调试效率会明显上一个档次。

今天给大家分享 8 个我自己在日常开发中反复用、而且非常“值”的 F12 技巧。

1. document.designMode 上帝模式

让整个网页“可编辑”，只需要在控制台里执行一行代码：

瞬间，整个网页的文本都可以直接点开编辑， 就像在浏览器里开了一个 Word。

你可以：

• 随便改文案
• 改标题、按钮文字
• 改提示语然后截图

关闭也很简单：

适用场景

• UI / 文案评审
• 产品说“这个字能不能换一下看看效果”
• 截图、演示、PPT

2. Network 请求重放（Replay XHR / Fetch）

联调接口时，这个功能真的救命。

操作步骤：

• 打开 Network
• 切到 Fetch / XHR
• 找到目标请求
• 右键 → Replay XHR

浏览器会原样再发一次请求， 不刷新页面、不走任何 UI 逻辑。

适用场景

• 接口偶现问题
• 登录 / 提交 / 下单类接口
• 不想反复点按钮

3. 修改 Network 请求返回结果（前端本地 Mock）

很多人不知道：Chrome 是可以直接改接口返回的。

通过 Network 的 Local Overrides，你可以：

• 改接口返回数据
• 模拟空数据 / 异常数据
• 前端不等后端直接开发

大致流程：

• 打开 Network → Overrides
• 选择一个本地目录
• 右键请求 → Save for overrides
• 修改返回内容
• 刷新页面，浏览器优先用你本地的响应

适用场景

• 后端接口还没好
• 复现线上异常数据
• 测试 UI 容错能力

4. 在控制台快速发送请求（Copy as fetch）

有时候你只想：

• 改个参数
• 重发一次请求
• 不想刷新页面

可以这样做：

• Network → Fetch / XHR
• 选中请求
• 右键 → Copy as fetch
• 粘贴到控制台
• 改参数，回车执行

适用场景

• 快速调接口
• 模拟不同入参
• 独立验证后端逻辑

5. 接口过滤：勾选「反转」，只看你关心的请求

Network 请求一多，很容易眼花。

很多人只会用关键字过滤， 但其实还有一个更狠的用法：

勾选「Invert（反转）」

你可以：

• 过滤掉埋点、监控、第三方请求
• 只留下你真正关心的接口

适用场景

• 页面请求非常多
• 只想盯业务接口
• 排查性能问题

6. 在控制台中获取当前选中的 DOM：$0

在 Elements 面板里选中一个 DOM 元素后， 切到 Console，直接用：

它就是你刚刚选中的那个元素。

你可以立刻做：

小知识：

• $1、$2 是之前选中过的元素
• 非常适合调样式、查布局

7. 在控制台用 $i 安装 npm 包

想临时用一下 dayjs、lodash， 但又不想查官网、写 demo？

可以直接在控制台里装。

前提： 安装 Chrome 插件 Console Importer

然后在控制台执行：

几秒后，库就能直接用了。

 适用场景

• 快速验证 API
• 临时数据处理
• 调试逻辑思路

8. 源代码里 Ctrl + P：秒级定位文件并打断点

当项目文件很多时， 在 Sources 面板里一层一层找文件，非常浪费时间。

正确姿势是：

• 打开 Sources
• 按 Ctrl + P / Cmd + P
• 输入文件名
• 回车直达文件
• 直接打断点

适用场景

• 大型项目
• 快速定位某个逻辑文件
• 临时追代码

写在最后

这些技巧没有一个是“高深 API”， 但它们都有一个共同点：

让你少刷新、少改代码、少等别人。

Chrome DevTools 真正强的地方， 不是功能多，而是你能不能把它当成主力开发工具来用。