 的 10 个隐藏技巧：你可能从来没用过 console.table())
🕵️♂️ 前言：别再 console.log(“111”) 了
你是不是还在用console.log打印一切？
对着控制台里展开的一坨 Object 点来点去？
为了重新请求一个 API，不得不疯狂刷新页面？
Chrome DevTools (F12)是浏览器送给开发者的神器，但 90% 的人只用到了它 10% 的功能。
今天，我整理了10 个让你效率翻倍的“隐藏技巧”。学会这些，你的调试速度至少快一倍，连后端同事都会来请教你。
1.console.table()：把数组变成 Excel
这是本文的标题担当。
当你打印一个由对象组成的数组（比如从 API 拿回来的 UserList）时，console.log会显示成折叠的{...}, {...}。
试试console.table()：
constusers=[{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，你想把它复制出来去格式化工具里看。
手动选中 -> 拖动鼠标 -> 右键复制？太慢了，而且容易漏掉。
操作：
- 控制台打印了变量
data。 - 输入
copy(data)并回车。 - 内容已经自动复制到你的剪贴板了！直接去编辑器 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：后端最爱的“重放请求”
我们在调试接口时，经常需要看网络请求。如果请求失败了，你想再试一次，难道要刷新页面重新填表单吗？
操作：
- 切换到Network面板，选中XHR/Fetch。
- 找到那个请求，右键 -> Replay XHR。
效果：浏览器会携带原本的 Header 和 Token 重新发送一次请求，无需刷新页面。
7. 条件断点 (Conditional Breakpoint)
你在调试一个for (let i=0; i<1000; i++)的循环，bug 只在i === 500时出现。
如果你打普通断点，你要按 500 次 F8。
操作：
- 右键点击行号，选择Add conditional breakpoint。
- 输入条件：
i === 500。
效果：程序会由着它跑，直到条件满足时才会自动暂停。
8. DOM 断点：谁动了我的 Div？
页面上有一个元素莫名其妙被删除了，或者属性变了，但你找不到是哪行 JS 代码干的（可能是某个祖传 jQuery 插件）。
操作：
- 在Elements面板选中该元素。
- 右键 ->Break on->Subtree modifications(子树修改) 或Attribute modifications(属性修改)。
效果：当有 JS 试图修改这个 DOM 时，Chrome 会自动暂停，并定位到那行“肇事”代码。
9. Network Throttling：模拟弱网环境
你的网页在公司千兆光纤下秒开，但在用户的 4G 信号下可能是个灾难。
操作：
Network面板 ->No throttling下拉框 -> 选择Slow 3G。
效果：强制模拟龟速网络，帮你检查 Loading 动画是否正常，请求超时处理是否到位。
10. Coverage：找出“未使用的代码”
网站加载慢？可能是加载了太多无用的 CSS/JS。
操作：
Ctrl + Shift + P-> 输入Coverage-> Show Coverage。- 点击底部的录制按钮，刷新页面。
效果：
Chrome 会显示每个文件的使用率。红色的条表示加载了但没执行的代码。
你可以据此优化打包体积，把没用的库剔除掉。
📝 总结
Chrome DevTools 不仅仅是一个查看器，它是一个集成开发环境 (IDE)。
掌握这些技巧，不仅能提升工作效率，还能在同事对着屏幕发愁时，走过去淡淡地敲一行document.designMode = 'on'，享受他们崇拜的目光。
工欲善其事，必先利其器。
