Chrome 开发者工具 - 如何锁定 CSS 类列表？答案

【问题标题】：Chrome Developer Tools - How to lock css classlist?Chrome 开发者工具 - 如何锁定 CSS 类列表？
【发布时间】：2020-01-30 19:24:12
【问题描述】：

我需要检查一个搜索栏。搜索栏最初是隐藏的，只有在单击搜索图标后才会显示。

但是，如果我单击我的开发人员工具，则搜索栏会再次消失...如果应该出现搜索框，则会添加一个名为 active 的类。所以我尝试手动添加类，但如果我检查其他元素，那么活动类会再次被删除......

有没有办法锁定班级列表？我可以编写一个 javascript 间隔方法来设置类列表，作为一种解决方法。

例如

setInterval(function() {
    jQuery("#debug")[0].classList = "label icon faSearch active";
}, 1000 );

但是有没有更简单的方法？

【问题讨论】：

【解决方案1】：

如果您只需要调试您的 CSS，您可以在开发者控制台的 Sources 选项卡中按 F8，您将暂停每个 Javascript 代码执行。这将防止任何 Javascript 代码更改 CSS 类。

然后您可以手动更改任何 CSS 类。

【讨论】：

首先，打开开发者工具并选择“Sources”（英文版本名称）选项卡。然后单击搜索栏图标以打开搜索栏。然后按 F8。您应该看到 Chrome 如何模糊背景并告诉您执行已停止。然后你可以在开发者工具中进入“元素”（英文版本名称）并检查所有的 DOM，通过双击搜索栏的“class=...”属性来添加任何你想要的 CSS 类。
可以加个截图吗？我找不到搜索栏？
我指的是您在问题中提到的搜索栏。

【解决方案2】：

希望对你有帮助，

当我们通过 chrome 开发者工具检查页面时，通过选择特定元素，将显示元素的样式，其中我们可以选择通过单击“:hov”来冻结元素的状态，如屏幕截图所示下面，

【讨论】：