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

Question

In this Confirm to Delete dialog, I am going to click the Cancel button. When I am pressing the button, its css class is chagned and also its style is chagned. The button's backgournd color gets deeper.

I want to copy the new class names and its css content in the devtools. But when I put the mouse in the devtools and right click the mouse button to open the context menu to copy the class names, the class names in this Cancel button just go back to its original state.

It seems that if I click anywhere in the screen, the Cancel button lost its pressing CSS classes. How can I freeze the pressing state CSS classes? I tried with checking the active, hover, visit state in the devtools, but it cannot get the Cancel button's backgroud color get deeper.

Here, after clicking this Cancel button, and do not click anywhere else, it is like this.

After loading the page, not click the Cancle button, check its state in the devtools. Its backgroud color cannot get deeper.

Answer 1

If you know conclusively that the button is getting new classes assigned to it on click, you can add a breakpoint to the element itself on an attribute modification. The steps:

1. Find the element in the "Elements" pane.
2. Right-click the element in the "Elements" pane and select Break on > attribute modifications
3. Click the element

If it gets a new class, that counts as an "attribute modification," which will trigger the debugger to break and freeze the state-- from there you should be able to investigate the DOM in its current, frozen state.

Here is my screenshot showing me take this actions for the snippet at the bottom of the question-- it worked for me in Chrome on Windows 10.

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

.red {
  background: red;
}

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

If that doesn't work, you could always be less targeted-- if you wanted to cast the widest net possible, I believe that right clicking the <body/> element in the "Elements" pane in the devtools and selecting Break on > subtree modifications would cause it to break anytime anything changed in the DOM beneath it-- but obviously that could cause the debugger to trigger a lot, so proceed with caution.