在浏览器控制台调试的 6 个秘密技巧

有一些神奇的快捷键只在浏览器 DevTools 控制台中工作，但它们绝对是调试时的秘密武器。

技巧 1：$0：最后选中的元素

单击"元素"选项卡中的任意元素，然后切换到控制台：

$0; // 查看元素
$0.style.backgroundColor = "red"; // 修改样式
$0.classList.add("highlight"); // 添加类名

更棒的是：$1、$2、$3、$4 会引用最后选中的 5 个元素。非常适合快速比较或操作多个元素。

技巧 2：$$：更优的选择器

忘掉 document.querySelectorAll() 吧，以后使用 $$：

// 旧方式
Array.from(document.querySelectorAll(".product-card")).forEach((card) => console.log(card.textContent));

// 新方式
$$(".product-card").forEach((card) => console.log(card.textContent));

$$() 返回一个真正的数组（而非 NodeList），因此你可以立即使用数组方法。无需再用 Array.from() 包装一层。

技巧 3：$：快速 querySelector

$("#header"); // 等同于 document.querySelector('#header')
$(".btn-primary"); // 等同于 document.querySelector('.btn-primary')

注意： 这仅在 jQuery 未加载时有效。

如果加载了 jQuery，$ 就是 jQuery。

技巧 4：$_： 最后一个结果

2 + 2; // 4

$_ * 10; // 40

$_ 存储控制台中最后一个表达式的计算结果。这对于无需重新输入即可链式执行操作非常有用。

技巧 5：copy()：即时剪贴板

const data = { users: [...], products: [...] };
copy(data);

无需再右键单击并选择"复制对象"，也无需尝试将文本字符串化并选中。只需copy(anything)点击一下，它就复制到剪贴板了。

技巧 6：getEventListeners() 事件检查器

getEventListeners($0);

这对于调试事件处理器问题或查找未移除的监听器导致的内存泄漏非常有用。

最后

正确的调试技巧可以为你节省数小时的试错时间。

但比这些快捷键更有价值的，是一种「工具思维」的习惯。

当你不再把 DevTools 看作一个静态的调试面板，而是一个可以对话、可以编程、可以无限扩展的工作台时，你的调试方式就会发生质变。

每一次敲击 $0 或 copy()，本质上都是在训练一种能力：用最小的摩擦，把想法变成验证。

真正的效率不在于记住多少快捷键，而在于你是否愿意停下来，花十分钟学习一个能每天为你节省一分钟的工具。

这种「时间复利」的思维方式，才是优秀开发者与普通开发者的分水岭。掌握这些工具，让自己成为那个在控制台里游刃有余、从容应对复杂问题的人。

我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的"网页版朋友圈"，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。