不用改一行代码，也能精准定位 bug
我观察过身边的前端同事，90% 的人调试代码的方式就是一行行加 console.log 。改完了再一行行删，出了 bug 再加回来。这个循环我自己也干了两年，直到有一天我发现了 Chrome DevTools 里这些"隐藏"功能------说是隐藏，其实一直都在那，只是没人告诉你怎么用。
今天我把 5 个最实用的技巧整理出来，每个都附操作步骤，看完今天就能用上。
为什么你应该少用 console.log
先说清楚：console.log 不是不能用。但它有三个致命问题：
- 侵入式 ：你得改代码、保存、刷新页面、看输出、再改代码、再删掉。一个 bug 可能要加删十几次。
- 信息有限 ：它只能告诉你"某个值是什么"，不能告诉你"这个值是从哪来的"、"调用栈是什么"、"经历了哪些状态变化"。
- 忘删的风险 ：线上代码里夹着 console.log('test') 和 console.log('到这了')，你一定在别人的项目里见过。
DevTools 的调试工具可以做到 console.log 做不到的事，而且不需要改任何一行代码。
技巧 1 ：条件断点 --- 替代 if (id === 5) console.log(data)
场景
你有一个列表渲染了 100 条数据，但只有第 5 条数据有 bug。用 console.log 的话，要么打印 100 条慢慢找，要么加 if 判断：
javascript
复制
// 你以前的做法
items.forEach(item => {
if (item.id === 5) {
console.log('有问题的数据:', item);
}
renderItem(item);
});
用条件断点
- 打开 DevTools → Sources 面板
- 找到对应代码，在行号上右键 → 选择 Add conditional breakpoint
- 输入条件：item.id === 5
- 回车确认
现在代码只会在 item.id === 5 时暂停，你可以在 Scope 面板里直接看到 item 的所有属性，不需要改任何代码。
进阶用法 ：条件表达式里可以写任何 JS：
javascript
// 只在数组长度异常时断住
arr.length > 100
// 只在某个属性为 null 时断住
user.profile === null
// 组合条件
item.status === 'error' && item.retryCount > 3
断点的颜色会变成橙色（普通断点是蓝色），方便你区分。
技巧 2 ： Logpoints --- 不改代码就能打日志
这是我最常用的功能，没有之一。
场景
你想在某行代码执行时打印一些信息，但不想改代码------比如代码在 node_modules 里，或者你不想频繁保存触发热更新。
操作步骤
- Sources 面板，在行号上右键 → 选择 Add logpoint
- 输入要打印的内容，语法和 console.log 一样：
text
复制
下载
'用户数据:', user, '请求耗时:', Date.now() - startTime, 'ms'
- 回车确认，行号旁边会出现一个粉色菱形标记
代码执行到这一行时，会在 Console 面板输出你写的内容，但不会暂停执行。
和 console.log 的区别
| 对比项 | console.log | Logpoint |
|---|---|---|
| 需要改代码 | 是 | 否 |
| 需要保存刷新 | 是 | 否 |
| 调试完要删除 | 是 | 关掉 DevTools 自动消失 |
| 在 node_modules 里能用 | 不方便 | 可以 |
团队里有个同事之前遇到第三方库的 bug，加了 20 行 console.log 在 node_modules 里，调完了忘删，下一次 npm install 覆盖掉了他的调试代码，他又加了一遍。如果用****Logpoint ，根本不需要碰源码 。
额外加分点 ：你甚至可以在生产环境的线上页面打开 DevTools，给 source map 文件加上 Logpoint，实时调试线上问题，不需要部署任何代码。
技巧 3 ： $0 和 copy() --- DOM 操作和数据复制神器
$0 ：快速引用当前选中的元素
在 Elements 面板中，你点击了某个 <div> 或 <button>，它的后面会出现一个灰色的 == $0。
这意味着，你可以在 Console 面板中直接输入****$0 来操作这个 DOM 元素 ：
javascript
$0.click() *//*触发点击
$0.style.display = 'none' *//*隐藏它
$0.innerText = '新标题' // 修改文本
1、2 分别代表上一次、上上次选中的元素。
copy() ：一键复制巨型数据
后端返回了一个巨大的 JSON，你想把它复制出来去格式化工具里看。手动选中 → 拖动鼠标 → 右键复制？太慢了，而且容易漏掉。
操作 ：
- 控制台打印了变量 data
- 输入 copy(data) 并回车
- 内容已经自动复制到你的剪贴板了！直接去编辑器 Ctrl+V 吧
技巧 4 ： document.designMode --- 像编辑 Word 一样改网页
产品经理："把这个标题改短点看看效果？把那个价格改成 9.9 试试？"
你不需要去改 DOM 节点的 innerText。在控制台输入：
javascript
document.designMode = 'on'
现在的网页就像 Word 文档一样，你可以直接点击页面上的任何文字进行修改、删除。改完截图发给产品，深藏功与名。
技巧 5 ： Ctrl + Shift + P --- 命令菜单，快到飞起
像 VS Code 一样，Chrome 也有命令面板。
打开 DevTools，按下 Ctrl + Shift + P (Mac 是 Cmd + Shift + P )。
神级命令推荐 ：
- 输入 Screenshot → 选择 Capture node screenshot：只对当前选中的 DOM 节点截图（自动去背景，比系统截图强 100 倍）
- 输入 Theme：快速切换明亮/暗黑模式
- 输入 Rendering：打开渲染面板，可以开启 Paint Flashing 查看页面重绘区域
写在最后
Chrome DevTools (F12) 是浏览器送给开发者的神器，但 90% 的人只用到了它 10% 的功能。
上面这 5 个技巧，每一个都能让你的调试效率翻倍。今天就开始用，你会发现调试 bug 这件事，真的可以不那么痛苦。
你还有哪些常用的 DevTools 隐藏技巧？欢迎在评论区分享