🕵️‍♂️ 前言：别再 console.log(“111”) 了

你是不是还在用 console.log 打印一切？
对着控制台里展开的一坨 Object 点来点去？
为了重新请求一个 API，不得不疯狂刷新页面？

Chrome DevTools (F12) 是浏览器送给开发者的神器，但 90% 的人只用到了它 10% 的功能。
今天，我整理了 10 个让你效率翻倍的“隐藏技巧”。学会这些，你的调试速度至少快一倍，连后端同事都会来请教你。

---

1. console.table()：把数组变成 Excel

这是本文的标题担当。
当你打印一个由对象组成的数组（比如从 API 拿回来的 UserList）时，console.log 会显示成折叠的 {...}, {...}。

试试 console.table()：

const users = [
    { id: 1, name: "Alice", role: "Admin", status: "Active" },
    { id: 2, name: "Bob", role: "User", status: "Offline" },
    { id: 3, name: "Charlie", role: "User", status: "Active" },
];

console.table(users);

效果： 控制台直接渲染出一张表格，支持点击表头排序！你可以一眼看出谁是 Admin，谁掉线了。

---

2. $0：快速引用当前选中的元素

在 Elements 面板中，你点击了某个 <div> 或 <button>，它的后面会出现一个灰色的 == $0。
这意味着，你可以在 Console 面板中直接输入 $0 来操作这个 DOM 元素！

• $0.click()：触发点击。
• $0.style.display = 'none'：隐藏它。
• $1, $2：分别代表上一次、上上次选中的元素。

---

3. copy()：一键复制巨型 JSON

后端返回了一个巨大的 JSON，你想把它复制出来去格式化工具里看。
手动选中 -> 拖动鼠标 -> 右键复制？太慢了，而且容易漏掉。

操作：

1. 控制台打印了变量 data。
2. 输入 copy(data) 并回车。
3. 内容已经自动复制到你的剪贴板了！ 直接去编辑器 Ctrl+V 吧。

---

4. document.designMode：像编辑 Word 一样改网页

产品经理：“把这个标题改短点看看效果？把那个价格改成 9.9 试试？”
你不需要去改 DOM 节点的 innerText。

操作：
在控制台输入：

document.designMode = 'on'

效果：
现在的网页就像 Word 文档一样，你可以直接点击页面上的任何文字进行修改、删除。改完截图发给产品，深藏功与名。

---

5. Ctrl + Shift + P：命令菜单 (Command Menu)

像 VS Code 一样，Chrome 也有命令面板。
打开 DevTools，按下 Ctrl + Shift + P (Mac 是 Cmd + Shift + P)。

神级命令推荐：

• 输入 Screenshot -> 选择 Capture node screenshot：只对当前选中的 DOM 节点截图（自动去背景，比系统截图强 100 倍）。
• 输入 Theme：快速切换明亮/暗黑模式。

---

6. Replay XHR：后端最爱的“重放请求”

我们在调试接口时，经常需要看网络请求。如果请求失败了，你想再试一次，难道要刷新页面重新填表单吗？

操作：

1. 切换到 Network 面板，选中 XHR/Fetch。
2. 找到那个请求，右键 -> Replay XHR。

效果： 浏览器会携带原本的 Header 和 Token 重新发送一次请求，无需刷新页面。

---

7. 条件断点 (Conditional Breakpoint)

你在调试一个 for (let i=0; i<1000; i++) 的循环，bug 只在 i === 500 时出现。
如果你打普通断点，你要按 500 次 F8。

操作：

1. 右键点击行号，选择 Add conditional breakpoint。
2. 输入条件：i === 500。

效果： 程序会由着它跑，直到条件满足时才会自动暂停。

---

8. DOM 断点：谁动了我的 Div？

页面上有一个元素莫名其妙被删除了，或者属性变了，但你找不到是哪行 JS 代码干的（可能是某个祖传 jQuery 插件）。

操作：

1. 在 Elements 面板选中该元素。
2. 右键 -> Break on -> Subtree modifications (子树修改) 或 Attribute modifications (属性修改)。

效果： 当有 JS 试图修改这个 DOM 时，Chrome 会自动暂停，并定位到那行“肇事”代码。

---

9. Network Throttling：模拟弱网环境

你的网页在公司千兆光纤下秒开，但在用户的 4G 信号下可能是个灾难。

操作：
Network 面板 -> No throttling 下拉框 -> 选择 Slow 3G。

效果： 强制模拟龟速网络，帮你检查 Loading 动画是否正常，请求超时处理是否到位。

---

10. Coverage：找出“未使用的代码”

网站加载慢？可能是加载了太多无用的 CSS/JS。

操作：

1. Ctrl + Shift + P -> 输入 Coverage -> Show Coverage。
2. 点击底部的录制按钮，刷新页面。

效果：
Chrome 会显示每个文件的使用率。红色的条表示加载了但没执行的代码。
你可以据此优化打包体积，把没用的库剔除掉。

---

📝 总结

Chrome DevTools 不仅仅是一个查看器，它是一个集成开发环境 (IDE)。
掌握这些技巧，不仅能提升工作效率，还能在同事对着屏幕发愁时，走过去淡淡地敲一行 document.designMode = 'on'，享受他们崇拜的目光。

工欲善其事，必先利其器。