9

In Chrome DevTools there is a shortcut to show/hide an element:

enter image description here

Chrome adds __web-inspector-hide-shortcut__ class to the element, but it is nothing more than visibility: hidden:

enter image description here

Is there similar shortcut to change element's display: none/block style? So on click it adds style='display: none;' attribute and toggles it none/block?

enter image description here

Green
  • 28,742
  • 61
  • 158
  • 247
  • Why `none/block` instead of `none/inline`, `none/table-row-group`, ... ? – Oriol Jan 22 '16 at 03:34
  • 1
    @Oriol, good option, why not? Do you know how? – Green Jan 22 '16 at 04:33
  • No idea. I was just pointing the difficulty of implementing a feature like this, because if you toggle between `none` and `block` some people would want `inline` instead of `block`. The root of the problem is that `display` was awfully designed, hopefully `box-suppress` introduced by Display L3 will fix this. – Oriol Jan 22 '16 at 04:56
  • If you edit the rules of the `__web-inspector-hide-shortcut__` class in Chrome's devtools, they will remain modified until you refresh. So you _could_ replace `visibility: hidden` with `display: none` and use `h` as your toggle key. This may be an acceptable compromise if you don't do this too often. – Ninjakannon May 25 '19 at 15:33

3 Answers3

4

There is no such shortcut. What you can do instead is use backspace to remove the element from the DOM and cmd+z to bring it back.

Konrad Dzwinel
  • 36,825
  • 12
  • 98
  • 105
1

Try to install this chrome extension:

亲爱的.web-inspector-hide-shortcut

It overrides the default css from "visibility: hidden" to "display: none"

Though, I'm not the author, the idea/implementation is simple, see source

Pretty much just add one additional css layer

from 

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

to 

.__web-inspector-hide-shortcut__ {
    display: none !important;
}
Alan Dong
  • 3,981
  • 38
  • 35
-1

We can hide the element by pressing some number of keys. You can do this in this way.

  • firstly, click on the div in the Devtools that you want to hide.
  • then type the keys in this 'width' on your keyboard.
  • now that particular element will get hidden and you will see this to be written in you div style 'web-inspector-hide-shortcut'

By doing this your element will hide, you don't need to apply 'display: none' to it.

Remember, this shortcut is reversible and to apply 'display: block' attribute, just do the same on the particular component.

hacknoid
  • 30
  • 6