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