如何在Chrome DevTools中冻结按钮按下状态的CSS状态

这种临时状态丢失的情况我之前也碰到过！本质是按钮的按下状态（不管是原生:active还是自定义类）是靠交互事件维持的，只要焦点转移或者触发了mouseup/blur这类事件，状态就会立刻恢复。下面给你几个实用的解决办法：

方法一：用快捷键快速切到DevTools锁定元素 #

1. 先点击取消按钮，让它保持按下的样式（绝对别点其他区域）
2. 直接按F12或Ctrl+Shift+I打开DevTools（用快捷键！别用鼠标点，避免触发页面的失焦事件）
3. 在Elements面板找到这个按钮元素，右键点击它，选择 Force Element State，看看有没有对应的自定义状态类（比如.btn-pressed这类）——如果是页面自定义的按下状态，勾选后就能强制保持；如果是原生:active但勾选没效果，说明页面用了自定义类来控制样式

方法二：用Debugger冻结页面状态 #

如果手速不够快，状态消失太快，就用断点锁死页面：

1. 打开DevTools的Sources面板
2. 点击取消按钮的瞬间，立刻按F8暂停脚本执行——页面会直接冻结在当前状态，按钮的按下样式不会消失
3. 回到Elements面板，就能安心复制此时的类名和对应的CSS代码了

方法三：手动给按钮添加状态类 #

如果前两种都不好使，直接在控制台强制加类：

1. 在Elements面板找到取消按钮，右键选择 Copy > Copy selector，复制它的选择器
2. 在Console面板输入代码（把选择器和类名换成你看到的）：

   document.querySelector('#cancel-btn').classList.add('btn-pressed')
   

3. 执行后按钮就会一直保持按下状态，你慢慢复制就行

补充一句：很多页面的按钮按下状态是通过mousedown加类、mouseup/blur移除类实现的，所以只要暂停脚本执行，事件就不会触发，状态自然不会变——这招最稳妥！

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