标签：Chrome 按钮 Cancel Devtools class 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。