Chrome Devtools中保持住CSS状态

如图，在单击这个Cancel按钮的时候，这个Button的CSS class会发生变化，按钮的颜色会变深。这时候我想拷贝出来这些新增加的class，我打开Chrome Devtools，然后在Devtools中选中这个元素，点击鼠标右键想打开Copy的弹出框的时候，这个Cancel按钮的CSS class又变回到了最开始的状态，无法拷贝。也就是说，单击了这个Cancel按钮后，一旦失去焦点，它的class又会变道原始的样子，但是如果想拷贝它的类，是无法不让它失去焦点的。那么，如果让Button在失去焦点的情况下，保持住刚刚的状态呢？

 在StackOverflow上发了一个帖子，有人的回复非常有用。https://stackoverflow.com/questions/69239436/how-to-freeze-the-css-state-in-chrome-devtools-after-pressing-the-click-button/

首先，在Chrome Devtools里边，邮件选中这个元素，然后选择 Break on > attribute odification. 这样，在这个元素有任何css变化的时候，就会进行中断，跟debug的端点差不多。

一旦有任何CSS的变化，它会立即跳转到如下的界面。这时候再回到Elements界面，就能看到CSS状态还是在保持有焦点情况下的状态。 

标签：Chrome,按钮,Cancel,Devtools,class,CSS
来源： https://blog.csdn.net/sundacheng1989/article/details/120400139