Is there a shortcut to toggle "display: none/block" in element's style in Chrome DevTools?

css google-chrome google-chrome-devtools shortcut chrome-dev-editor
Green picture Green · Jan 22, 2016 · Viewed 9.3k times · Source

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

Answer

Konrad Dzwinel picture Konrad Dzwinel · Feb 1, 2016

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.

Related questions

See :hover state in Chrome Developer Tools

I want to see the :hover style for an anchor I'm hovering on in Chrome. In Firebug, there's a style dropdown that allows me to select different states for an element. I can't seem to find anything similar in Chrome. …

Read More
How to save CSS changes of Styles panel of Chrome Developer Tools?

How to save CSS changes of Styles panel of Google Chrome Developer Tools? At tool's website it's mentioned that we can see all change in resource panel But I'm working locally on a CSS file but changes are not showing …

Read More
Freeze screen in chrome debugger / DevTools panel for popover inspection?

I'm using the chrome inspector to try and analyze the z-index of a twitter bootstrap popover, and finding it extremely frustrating... Is there a way to freeze the popover (while shown) so that I can assess and modify the associated …

Read More