Skip to content

Latest commit

 

History

History
26 lines (19 loc) · 990 Bytes

hide-an-element-with-chrome-devtools.mdx

File metadata and controls

26 lines (19 loc) · 990 Bytes
category created tags title
Tip
2021-03-15
DevTools
Hide an element with Chrome DevTools

We can hide an element by inspecting it with Chrome DevTools, right-clicking the element under the Elements tab, and choosing the Hide element menu from the context menu.

Hide an element

If you're a fan of using the shortcut, then pressing the h key has the same effect.

Both ways add a specical CSS class named __web-inspector-hide-shortcut__ to the element:

.__web-inspector-hide-shortcut__ {
    visibility: hidden !important;
}

Setting display: none, opacity: 0, and visibility: hidden are the common ways to hide an element with CSS. If you want to see the differences between them, take a look at this post