按下单击按钮后如何在 Chrome devtools 中冻结 CSS 状态

Question

在此“确认删除”对话框中，我将单击“取消”按钮。当我按下按钮时，它的 css class 被改变了，它的样式也被改变了。按钮的背景颜色变深

我想在开发工具中复制新的 class 名称及其 css 内容。但是当我将鼠标放在 devtools 中并右键单击鼠标按钮打开上下文菜单以复制 class 名称时，此取消按钮中的 class 名称将返回其原始状态。

似乎如果我单击屏幕中的任意位置，“取消”按钮就会失去按下 CSS class 的功能。如何冻结按下状态 CSS classes？我尝试在 devtools 中检查活动、悬停、访问状态，但它无法使取消按钮的背景颜色变深。

这里点了这个取消按钮之后，其他地方都不点了，是这样的

加载页面后，不要点击取消按钮，在开发者工具中检查它的状态。它的背景颜色不能加深。

Answer 1

如果您最终知道按钮在单击时获得了新的 classes 分配给它，您可以在属性修改时向元素本身添加断点。步骤：

在“元素”窗格中查找元素。
右键单击“元素”窗格中的元素，然后 select Break on > attribute modifications
单击元素

如果它获得一个新的 class，这将被视为“属性修改”，这将触发调试器中断并冻结状态——从那里您应该能够调查 DOM 处于当前冻结状态。

这是我的屏幕截图，显示我对问题底部的代码段执行此操作——它在 Windows 10 的 Chrome 对我有效。

function addClassToBtn() {
  const btn = document.querySelector('button');
  btn.classList.toggle('red');
}

.red {
  background: red;
}

<button onclick="addClassToBtn()">Click me</button>

如果这不起作用，您总是可以降低目标性——如果您想尽可能广泛地撒网，我相信右键单击 <body/> 元素在 devtools 的“元素”窗格中 selecting Break on > subtree modifications 会导致它随时中断 anything在其下方的 DOM 中进行了更改——但显然这可能会导致调试器触发 lot，因此请谨慎操作。

按下单击按钮后如何在 Chrome devtools 中冻结 CSS 状态

How to freeze the CSS state in Chrome devtools after pressing the click button

css

devtools

google-chrome-devtools