Chrome 浏览器，对前端来说几乎就是“第二个 IDE”。
我们每天都在用它看 Network、打断点、调样式，但说实话——DevTools 的能力，你可能只用了 30%。
有些功能并不冷门，只是没人系统地告诉你该怎么用； 但一旦你用顺了，调试效率会明显上一个档次。
今天给大家分享 8 个我自己在日常开发中反复用、而且非常“值”的 F12 技巧。
1. document.designMode 上帝模式
让整个网页“可编辑”，只需要在控制台里执行一行代码：
|
1 |
document.designMode = 'on' |
瞬间，整个网页的文本都可以直接点开编辑， 就像在浏览器里开了一个 Word。
你可以：
- 随便改文案
- 改标题、按钮文字
- 改提示语然后截图
关闭也很简单：
|
1 |
document.designMode = 'off' |
适用场景
- 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 |
$0 |
它就是你刚刚选中的那个元素。
你可以立刻做：
|
1 2 3 |
$0.offsetWidth $0.getBoundingClientRect() $0.classList |
小知识：
- $1、$2 是之前选中过的元素
- 非常适合调样式、查布局
7. 在控制台用 $i 安装 npm 包
想临时用一下 dayjs、lodash， 但又不想查官网、写 demo？
可以直接在控制台里装。
前提： 安装 Chrome 插件 Console Importer
然后在控制台执行：
|
1 2 |
$i('dayjs') $i('lodash') |
几秒后，库就能直接用了。
适用场景
- 快速验证 API
- 临时数据处理
- 调试逻辑思路
8. 源代码里 Ctrl + P：秒级定位文件并打断点
当项目文件很多时， 在 Sources 面板里一层一层找文件，非常浪费时间。
正确姿势是：
- 打开 Sources
- 按 Ctrl + P / Cmd + P
- 输入文件名
- 回车直达文件
- 直接打断点
适用场景
- 大型项目
- 快速定位某个逻辑文件
- 临时追代码
写在最后
这些技巧没有一个是“高深 API”， 但它们都有一个共同点：
让你少刷新、少改代码、少等别人。
Chrome DevTools 真正强的地方， 不是功能多，而是你能不能把它当成主力开发工具来用。
