大家好，我是小贺。
如果你是前端，浏览器开发者工具大概已经是每天都要打交道的老朋友了。
但问题也恰恰在这里。我相信很多人会打开 F12，却只会最基础的查看元素、改两行样式、看看报错。真正能让调试变轻松的功能，反而常常被忽略。
这篇不讲太多原理，直接分享 5 个我觉得非常实用的 Elements 面板小技巧。它们不复杂，但一旦用顺手，确实能帮你少走不少弯路。
1. 选中即消失？“强制状态”拯救你
你一定遇到过这种情况：想调试一个鼠标悬浮（hover）后才出现的二级菜单，结果鼠标刚一移过去，菜单就没了，根本来不及查看。
这时候不用和手速较劲。
在 Elements 面板里，右键点击触发菜单的元素，选择 Force state -> :hover。
这样元素就会被强制锁定在悬浮状态。除了 :hover，常见的 :active、:focus 这些状态也都能手动模拟。
很多“选中就消失”的交互问题，本质上都可以靠这个功能解决。
2. 只有高手才知道的“H 键大法”
有时候你只是想临时看一眼页面效果，比如：
- 这个 Banner 去掉之后页面会不会更干净？
- 这个弹窗先隐藏，下面的布局会不会乱？
- 这个模块不显示时，留白是不是太大？
这时其实不用手动改 display: none。
直接在 Elements 面板里选中元素，按一下键盘上的 H。
元素会立刻隐藏，再按一次又能恢复。
如果你想进一步测试，可以直接按 Delete 把节点删掉；删错了也不用慌，Ctrl + Z 在开发者工具里同样可以撤回。
这个功能特别适合快速试布局，不用来回改代码、刷新页面。
3. $0：Elements 与控制台的“传送门”
假设你已经在 Elements 面板里选中了一个很深层的 div，这时候想在 Console 里看一下它的 offsetHeight，或者直接调用它的方法。
如果还要自己手写一遍 document.querySelector(...)，就太费劲了。
按 Esc 呼出底部控制台，直接输入 $0。
$0 就是你当前在 Elements 面板里选中的那个元素。
比如你可以直接这样用：
$0.offsetHeight;
$0.classList;
$0.getBoundingClientRect();
更方便的是，浏览器还会记住你的选择历史：$1 是上一次选中的元素，$2 是上上次。
调试复杂页面时，这个功能真的非常顺手。
4. 截图不用描边，自带“像素级”捕获
有时候你想把某个按钮、卡片、弹窗单独截出来发给设计师，或者临时拿去做文档、做演示。
这时候最省事的方法，不是手动截图框选，而是直接让浏览器截这个节点。
操作步骤很简单：
- 在
Elements面板里选中目标元素 - 按
Ctrl + Shift + P打开命令面板 - 输入
screenshot（截图） - 选择
Capture node screenshot
这样导出的通常是一个干净的 PNG，元素边缘也会比手动框选更完整。对前端、设计协作、写文档的人来说，这个功能都很好用。
彩蛋：一键开启“整页可编辑”模式
有时候你只是想临时改改页面上的文字，看看排版效果，又不想在 Elements 里逐个节点去双击编辑。
在 Console 里输入：
document.designMode = 'on';
执行之后，整个页面会进入一种近似“可编辑文档”的状态。很多文字内容都可以直接点进去修改、删除、试排版。
它当然不能代替真正改代码，但在演示想法、快速验证文案展示效果时，非常方便。
5. 元素找不到了？试试“滚动到视图”
页面一长，DOM 结构一复杂，经常会出现一种情况：
你在 Elements 面板里明明看到了某个节点，但一时找不到它到底对应页面上的哪一块。
这时可以直接在对应的 HTML 标签上右键，选择 Scroll into view（滚动到视图）。
浏览器会自动把页面滚动到这个元素所在的位置。
这个小功能看起来不显眼，但在排查长页面、复杂列表、深层组件时，能省下很多来回找位置的时间。
写在最后
开发者工具里真正有用的，很多都不是“高级功能”，而是这些平时不太起眼、但一旦掌握就会频繁用到的小能力。
它们不会让你一夜之间变成高手，但会让你少做很多重复劳动。
如果你现在就在电脑前，不妨打开浏览器按一次 F12，先试试 $0 和 H 键，基本马上就能体会到差别。
这里是《你真的会使用浏览器么？》系列的第一篇。如果大家喜欢我们后续继续更新。
ps：文章演示网站为-(小贺的博客)
