前言：F12 里的宝藏
对于前端开发和设计师来说，Chrome 开发者工具（DevTools）是每天陪伴时间最长的伙伴。但大多数人只用了它 10% 的功能。
你是否还在为了截图装各种插件？
你是否为了复现一个 API 请求反复刷新页面？
你是否对着压缩成一行的 JS 代码欲哭无泪？
今天，我们要揭开 DevTools 的封印，介绍 10 个让你丢掉鼠标、效率起飞的隐藏技巧。
1. 命令面板：DevTools 里的 Spotlight 🔍
快捷键：Ctrl + Shift + P (Mac: Cmd + Shift + P)
这是所有技巧中最重要的一个！
就像 VS Code 一样，DevTools 也有一个万能命令面板。打开它，你几乎可以执行任何操作，完全不需要在复杂的菜单里点来点去。
- 试一试：打开面板，输入
Dark，可以一键切换暗黑模式；输入Screenshot，可以看到各种截图选项。
2. 完美的全屏截图 📸
场景：老板让你截一张网页的长图，你还在用 QQ 截图或者下载插件拼接？
操作：
- 打开命令面板 (
Ctrl + Shift + P)。 - 输入
Full。 - 选择 Capture full size screenshot。
Chrome 会自动滚屏并生成一张完美的整个网页的长截图，直接下载到本地。如果你只想截取某个特定的 div，选中那个元素，命令面板搜 node screenshot 即可。
3. $0：控制台的魔法变量 🪄
场景：你在 Elements 面板选中了一个很深层级的 DOM 元素，想在 Console 里用 JS 操作它（比如获取它的宽度，或者修改样式）。
操作：
- 在 Elements 面板点击选中该元素。
- 切换到 Console 面板，输入
$0并回车。
$0 就是当前选中元素的引用！同理，$1 是上一次选中的，一直到 $4。再也不用写 document.querySelector('.wrapper .container .box') 这种长代码了。
4. 网络请求重放 (Replay XHR) 🔄
场景：你在调试一个表单提交接口，后端报错了。你修改了后端代码，为了验证修复，你必须：刷新页面 -> 重新填表单 -> 点击提交。太累了！
操作：
- 打开 Network 面板。
- 找到那个失败的请求 (XHR/Fetch)。
- 右键点击该请求 -> Replay XHR。
浏览器会直接重新发送这个请求（带上原本的参数和 Header），你根本不需要刷新页面，也不用重新填表单。
5. 像编辑 Word 一样编辑网页 (designMode) ✍️
场景：产品经理让你看看“如果不换行，这个标题能塞下多少字”。你还在 Elements 里一个个改 DOM 文本吗？
操作：
在 Console 里输入以下代码并回车：
document.designMode = 'on'现在，你可以直接点击网页上的任何文字进行修改、删除，就像在编辑 Word 文档一样！改完后输入 document.designMode = 'off' 退出。
6. 复制为 cURL/Fetch (前后端扯皮神器) 🤝
场景：前端请求报错，后端说“我本地没问题，你把请求发我”。你截了个图过去，后端说“看不清参数”。
操作：
- 在 Network 面板找到该请求。
- 右键 -> Copy -> Copy as cURL (或者 Copy as fetch)。
你会得到一段完整的命令行代码，包含 Cookie、Header、Body。直接发给后端，他在终端里粘贴就能 100% 还原你的请求。谁的锅，一测便知。
7. 代码美化 (Pretty Print) 🌸
场景：生产环境报错了，你点进去看源码，发现是一个被压缩过的 min.js，所有代码都在一行，根本没法看。
操作：
- 在 Sources 面板打开那个 JS 文件。
- 点击代码窗口左下角的
{}图标（Pretty Print）。
DevTools 会自动把压缩代码格式化成易读的形式，这下终于可以打断点了！
8. DOM 断点 (监测谁动了我的元素) 🕵️
场景：网页上有一个元素莫名其妙被加了个 class 或者被删除了，你代码找半天找不到是哪行 JS 干的。
操作：
- 在 Elements 面板右键点击该元素。
- 选择 Break on -> Attribute modifications (属性变化) 或 Node removal (节点移除)。
当 JS 试图修改这个元素时，浏览器会自动暂停，并直接定位到那一行“作案”的 JS 代码。
9. 实时表达式 (Live Expressions) 👁️
场景：你想监控页面滚动的高度 scrollY，或者某个变量的变化。以前我们只能狂写 console.log，搞得控制台全是刷屏。
操作：
- 在 Console 面板上方，点击像“眼睛”一样的图标 (Create live expression)。
- 输入你想监控的表达式，例如
document.activeElement(查看当前焦点在哪) 或window.scrollY。
这个值会像仪表盘一样固定显示在顶部，并实时更新，不会刷屏。
10. 模拟弱网环境 (Network Throttling) 🐢
场景：你在本地开发网速飞快，但用户可能在地铁里用 4G。你需要测试网页加载慢的时候 Loading 动画是否正常。
操作：
- 打开 Network 面板。
- 在顶部的工具栏找到 No throttling 下拉菜单。
- 选择 Slow 3G。
哪怕你用着千兆光纤，网页也会变得像龟速一样慢，这是测试加载体验和接口竞态条件（Race Condition）的最佳方法。
总结
Chrome DevTools 就像一把瑞士军刀，上面介绍的只是冰山一角。
推荐一个进阶习惯：
下次遇到繁琐的操作时，先按一下 Ctrl + Shift + P，搜搜看有没有对应的命令。你会发现，你和高阶前端大神的差距，可能就在这几个快捷键之间。
