如何在谷歌浏览器中调试激活/选中状态的输入元素（CSS）

嘿，这个问题我太熟了！很多人第一次调试元素的:focus伪类样式时都会碰到这个卡点，别担心，给你几个简单好用的解决方案：

方法一：暂停脚本执行锁定聚焦状态 #

这是最直接的方式，能瞬间冻结页面状态：

• 先点击输入框，让它处于聚焦激活状态
• 按下快捷键：Windows/Linux按F8，Mac按Cmd + \，暂停页面的JavaScript执行
• 此时页面状态被固定，即使右键点击也不会失去焦点，再正常选择「检查」就能查看聚焦状态下的CSS规则了

方法二：手动强制触发伪类状态 #

通过DevTools的内置功能直接让元素处于聚焦状态：

• 先正常选中输入框元素（不用管它当前是否聚焦）
• 在Elements面板右侧的「Styles」标签中，点击右上角的:hov按钮（Hover状态切换按钮）
• 在弹出的菜单里，勾选:focus选项，元素会立刻呈现聚焦状态，你就能实时查看对应的样式规则，还能直接修改测试

方法三：用元素选择器快捷键快速选中 #

利用DevTools的元素选择快捷键跳过右键操作：

• 点击输入框让它聚焦
• 按下Ctrl + Shift + C（Windows/Linux）或Cmd + Shift + C（Mac），直接启用元素选择器
• 用鼠标点击已经聚焦的输入框，就能在DevTools中选中该元素，同时聚焦状态不会丢失

这些方法不光适用于:focus状态，调试:hover、:active这类伪类样式时也同样好用，下次碰到类似问题直接用就行！

内容的提问来源于stack exchange，提问作者M.E.