有没有在Chrome DevTools中以元素样式切换“display：none/block”的快捷方式？

Chrome浏览器添加__web-inspector-hide-shortcut__类的元素，但它只不过是visibility: hidden更多：

是否有类似的快捷方式来改变元素的display: none/block风格？所以点击它会添加style='display: none;'属性并切换它none/block？

2016-01-22 Green

为什么'无/ block'而不是'无/ inline'，'无/表行group'，...？ – Oriol

@Oriol，不错的选择，为什么不呢？你知不知道怎么？ – Green

不知道。我只是指出实现这样一个功能的难度，因为如果你在'none'和'block'之间切换，有些人会想'inline'而不是'block'。问题的根源在于'display'设计得非常好，希望Display L3引入'box-suppress'可以解决这个问题。 – Oriol

没有这样的捷径。您可以改为使用退格键将元素从DOM中删除，并使用cmd + z将其恢复。

2016-01-31 23:31:13

尝试安装此Chrome扩展：

它覆盖了从"visibility: hidden"到"display: none"

虽然默认的CSS，我不是作者，思想/实现简单，看source

几乎只是添加一个额外的CSS层

从

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

到

.__web-inspector-hide-shortcut__ { 
    display: none !important; 
}

2016-08-29 20:07:23

回答