Chrome DevTools 隐藏神技：这 5 个调试技巧你可能从来没用过

不用改一行代码，也能精准定位 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);
});
用条件断点

1. 打开 DevTools → Sources 面板
2. 找到对应代码，在行号上右键 → 选择 Add conditional breakpoint
3. 输入条件：item.id === 5
4. 回车确认
   现在代码只会在 item.id === 5 时暂停，你可以在 Scope 面板里直接看到 item 的所有属性，不需要改任何代码。
   进阶用法：条件表达式里可以写任何 JS：
   javascript
   // 只在数组长度异常时断住
   arr.length > 100

// 只在某个属性为 null 时断住
user.profile === null

// 组合条件
item.status === 'error' && item.retryCount > 3
断点的颜色会变成橙色（普通断点是蓝色），方便你区分。

技巧 2：Logpoints — 不改代码就能打日志
这是我最常用的功能，没有之一。
场景
你想在某行代码执行时打印一些信息，但不想改代码——比如代码在 node_modules 里，或者你不想频繁保存触发热更新。
操作步骤

1. Sources 面板，在行号上右键 → 选择 Add logpoint
2. 输入要打印的内容，语法和 console.log 一样：
   text
   '用户数据:', user, '请求耗时:', Date.now() - startTime, 'ms'
3. 回车确认，行号旁边会出现一个粉色菱形标记
   代码执行到这一行时，会在 Console 面板输出你写的内容，但不会暂停执行。
   console.log 和 Logpoint 的核心区别，一句话就能说透：一个改源码，一个不改源码。

用 console.log 调试，你得在编辑器里找到对应文件，敲一行打印代码，保存，然后刷新页面才能看到输出。调试完了还得记得把这行删掉，不然一不小心就提交到代码仓库里，污染生产环境的控制台。如果调试的对象是 node_modules 里的第三方包，那就更麻烦了——你得去改依赖包的源码，而且下次重装依赖时改动就全丢了。

Logpoint 则完全绕开了这些问题。它在浏览器 DevTools 的 Sources 面板里设置，不需要动源码，所以也不需要保存文件和刷新页面，设完下一行代码执行时立刻就输出结果。调试完更省心，关掉 DevTools 或者移除断点它就自动消失了，不会留下任何痕迹。哪怕是调试 node_modules 里的压缩代码，也能直接在 Sources 里定位到那一行加上 Logpoint，完全不用碰文件。

在输出内容上也有区别。console.log 只能打印你预先写在括号里的东西，而 Logpoint 支持输入表达式，比如你可以写 userInfo.name + '今年' + userInfo.age + '岁'，甚至直接调一个函数来生成输出内容。如果只想在特定条件下打印，Logpoint 还能设置条件表达式，比如 count > 10，不满足条件时连日志都不会生成，对性能几乎没有影响。

所以总结下来就是：日常临时调试，先用 Logpoint，快、干净、零侵入。等确定这条日志需要长期保留、反复查看的时候，再考虑用 console.log，但记得包一层环境判断，别让它跑进生产环境。
团队里有个同事之前遇到第三方库的 bug，加了 20 行 console.log 在 node_modules 里，调完了忘删，下一次 npm install 覆盖掉了他的调试代码，他又加了一遍。如果用 Logpoint，根本不需要碰源码。
额外加分点：你甚至可以在生产环境的线上页面打开 DevTools，给 source map 文件加上 Logpoint，实时调试线上问题，不需要部署任何代码。
技巧 3：$0 和 copy() — DOM 操作和数据复制神器
$0：快速引用当前选中的元素
在 Elements 面板中，你点击了某个

或 ，它的后面会出现一个灰色的 == $0。
这意味着，你可以在 Console 面板中直接输入 $0 来操作这个 DOM 元素：
javascript
$0.click() // 触发点击
$0.style.display = 'none' // 隐藏它
$0.innerText = '新标题' // 修改文本
$1、$2 分别代表上一次、上上次选中的元素。
copy()：一键复制巨型数据
后端返回了一个巨大的 JSON，你想把它复制出来去格式化工具里看。手动选中 → 拖动鼠标 → 右键复制？太慢了，而且容易漏掉。
操作：

1. 控制台打印了变量 data
2. 输入 copy(data) 并回车
3. 内容已经自动复制到你的剪贴板了！直接去编辑器 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 查看页面重绘区域
{{010-立冬.png(uploading...)}}
写在最后
Chrome DevTools (F12) 是浏览器送给开发者的神器，但 90% 的人只用到了它 10% 的功能。
上面这 5 个技巧，每一个都能让你的调试效率翻倍。今天就开始用，你会发现调试 bug 这件事，真的可以不那么痛苦。
你还有哪些常用的 DevTools 隐藏技巧？欢迎在评论区分享