如何在Chrome DevTools中查看button:hover的用户代理样式？

排查与解决步骤： #

• 排除自定义样式干扰：如果当前页面有CSS重置（比如* { all: unset; }或针对button的样式重置），会覆盖浏览器默认的hover样式。先在空白页面（直接新建标签页，手动插入<button>测试按钮</button>）中测试，确认问题是否由页面样式导致。
• 正确触发强制hover状态：
  1. 打开Chrome开发者工具（F12/右键「检查」），选中目标button元素。
  2. 在样式面板顶部找到:hov按钮（和:cls等按钮并列），点击后勾选:hover选项。
  3. 滚动到样式面板最下方的用户代理样式表区域，展开查看是否存在button:hover相关规则。
• 通过计算样式面板查看：
  切换到「计算样式（Computed）」面板，勾选「显示浏览器样式」选项，搜索hover相关属性，即可看到hover状态下的计算后样式值。
• 查看Chrome默认样式源码：
  地址栏输入 chrome://version/，找到「个人资料路径」，打开路径下的User StyleSheets文件夹；或者直接参考Chrome开源的用户代理样式表，里面包含了button元素所有状态的默认样式定义。
• 系统主题影响排查：若Chrome使用了系统主题，部分按钮hover样式可能由系统渲染，此时不会在开发者工具的用户代理样式表中显示。切换到Chrome默认主题后再测试。

内容的提问来源于stack exchange，提问作者sendgn