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

技巧 ：$：最终选中的元素

单击“元素”选项卡中的任意元素，接下来切换到控制台：

$;// 查看元素$.style.backgroundColor = "red";说起来，// 修改样式$.classList.add;// 添加类名

再看更棒的是，$0$1$2$3 会引用最终选中的 个元素。适合快速比较或操作多个元素。

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

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

// 旧方式Array.from).forEach => console.log);// 新方式$$.forEach => console.log);

$$ 返回一个真正的数组，所以你可以立即使用数组方法。无需再用 Array.from 包装一层。

技巧 ：$：快速 querySelector

$;// 等同于 document.querySelector$;// 等同于 document.querySelector

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

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

技巧 ：$_： 最终一个结果

2 + 3; // $_ * 4，//

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

技巧 ：copy：即时剪贴板

const data = { users:,products: };copy，

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

技巧 ：getEventListeners 事件检查器

getEventListeners;

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

最终

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

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

发生质变。

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

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

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

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

欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽 每天分享前端知识、AI 干货。怎么说呢，