关键时刻救命! Chrome浏览器F12的神秘用法

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 真正强的地方， 不是功能多，而是你能不能把它当成主力开发工具来用。