引言：你是否遇到过这种尴尬？
作为前端开发或测试人员，我们经常需要调整页面的 CSS 样式。通常情况下，我们只需要右键点击“检查（Inspect）”或者使用 DevTools 的元素选择器（那个小箭头图标）就能轻松定位到目标 DOM。
但是，遇到**下拉菜单（Dropdown）、鼠标悬停提示（Tooltip）或者点击弹出的气泡层（Popover）**时，事情就变得麻烦了：
当你打开下拉框，正准备去点击 DevTools 的“元素选择器”时，点击动作导致页面失去焦点（blur），下拉框瞬间收回去了！ 根本选不中，更别提修改样式了。
虽然可以通过手速（极快地截图或暂停）或者在代码里打断点来解决，但都不够优雅。今天分享一个 Chrome DevTools 的隐藏大招，让你从容地调试这些“害羞”的元素。
解决方案：开启 "Emulate a focused page"
这个功能的核心原理是欺骗浏览器，让它认为当前页面一直处于“聚焦（Focus）”状态，即使你正在点击控制台面板，页面也不会触发 blur 事件，从而保持下拉框的展开状态。
步骤演示
第一步：打开开发者工具
在 Chrome 浏览器中按 F12 或右键点击页面选择“检查（Inspect）”打开控制台。
第二步：找到 "Rendering"（渲染）工具
大多数人平时只关注 Elements 和 Console 面板，这个神器藏在更深的地方：
- 点击 DevTools 面板右上角的 三个小点图标（Customize and control DevTools）。
- 在菜单中选择 More tools（更多工具）。
- 在子菜单中点击 Rendering（渲染）。
(此时，控制台下方会出现一个新的 Rendering 选项卡)
第三步：勾选 "Emulate a focused page"
在 Rendering 面板中，向下滚动找到 Emulate a focused page 选项，并将其勾选。
第四步：见证奇迹
- 回到你的网页，点击打开那个“一碰就消失”的下拉框。
- 现在，你可以放心地去点击 DevTools 的元素选择器（左上角的小箭头）。
- 你会发现，下拉框不再收回，你可以像调试普通
div一样轻松选中它内部的选项，查看并修改样式了！
💡 进阶技巧：其他几种替代方案
除了上述方法，还有两个常用的技巧可以应对不同场景：
方案二：巧用 F8（暂停调试）
如果元素是纯粹靠 CSS :hover 触发的，或者是 JS 监听鼠标移动的：
- 让鼠标悬停在元素上，使其显示。
- 保持鼠标不动，按下键盘上的
F8（或者Ctrl +）。 - 浏览器执行会被暂停（Paused in debugger），此时页面被冻结，你可以随意去检查元素。
方案三：强制元素状态（Force state）
如果是简单的 CSS 伪类控制（如 :hover, :active, :focus）：
- 在 Elements 面板选中该元素的父级。
- 右键点击 HTML 标签，选择 Force state。
- 勾选
:hover或:focus，强制让浏览器渲染该状态下的样式。
总结
对于现代 Web 应用中常见的基于 JavaScript blur 事件关闭的下拉组件（如 Ant Design、Element UI 的 Select 组件），Rendering -> Emulate a focused page 是最稳妥、最优雅的调试方式。
只需简单几步配置，从此告别手忙脚乱的调试体验。希望这个小技巧能提升你的开发效率！