Chrome 开发者工具 - 如何锁定 css 类列表？

Question

I need to inspect a search bar. The search bar is initially hidden and only shows after clicking on the search icon.

However, if I click on my developer tools then the search bar dissapears again... If the search box should appear, then a class named active is added. So I tried to add the class manually but if I inspect other elements, then the active class is removed again...

Is there a way to lock the classlist? I could write a javascript interval method which sets the classlist, as a workaround.

eg

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

But is there an easier way?

Answer 1

If you only need to debug your CSS, you can press F8 in the Sources tab of Developer console and you'll pause every Javascript code execution. That will prevent any Javascript code from altering the CSS classes.

Then you can change any CSS class manually.

Answer 2

Hope this helps,

When we inspect a page by chrome developer tools, By selecting the particular element, the styles of the element will be shown, where in we will have option to freeze the element's state by clicking ":hov" as shown in the screenshot below,