如何在DevTools中查看元素动态应用的伪状态？

一、浏览器开发者工具（优先推荐） #

Chrome/Edge DevTools #

• 打开DevTools（快捷键F12或Ctrl+Shift+I），切换到Elements面板
• 选中目标元素：用左上角的选择工具点击页面元素，或在DOM树中找到对应节点
• 查看当前状态：
  • 元素处于hover/focus/active/checked状态时，DOM节点右侧会显示对应标记（如[focus]、[hover]）
  • 切换到Styles标签，生效的伪类样式会被高亮，规则前会标注对应的伪类（如element:hover），直观看到当前作用的伪类样式
  • 若要持续追踪变化，右键点击DOM节点，选择Break on > Attribute modifications，状态相关属性（如aria-checked）变化时会触发断点

Firefox DevTools #

• 打开DevTools（快捷键F12或Ctrl+Shift+I），切换到Inspector面板
• 选中目标元素后，在右侧Rules标签点击顶部的:hov按钮，面板会列出所有伪状态，当前激活的状态会被勾选
• 生效的伪类样式会在Rules列表中高亮，直接查看当前元素的伪状态

二、JavaScript代码片段 #

由于浏览器未提供直接读取CSS伪类状态的API，需通过事件监听间接追踪：

1. 获取当前状态 #

const target = document.querySelector('#your-element-id');

// 检查focus状态
const isFocused = target === document.activeElement;

// 检查checked状态（适用于复选框/单选框等）
const isChecked = target.checked;

// 追踪hover状态
let isHovered = false;
target.addEventListener('mouseenter', () => isHovered = true);
target.addEventListener('mouseleave', () => isHovered = false);

// 追踪active状态
let isActive = false;
target.addEventListener('mousedown', () => isActive = true);
target.addEventListener('mouseup', () => isActive = false);

2. 实时监听状态变化 #

const target = document.querySelector('#your-element-id');

// 监听focus/blur
target.addEventListener('focus', () => console.log('进入focus状态'));
target.addEventListener('blur', () => console.log('离开focus状态'));

// 监听checked变化
target.addEventListener('change', () => console.log(`checked状态：${target.checked}`));

// 监听hover变化
target.addEventListener('mouseenter', () => console.log('进入hover状态'));
target.addEventListener('mouseleave', () => console.log('离开hover状态'));

// 监听active变化
target.addEventListener('mousedown', () => console.log('进入active状态'));
target.addEventListener('mouseup', () => console.log('离开active状态'));

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