css - Chrome DevTools の要素のスタイルで「display: none/block」を切り替えるショートカットはありますか?

Question

Chrome DevTools には、要素を表示/非表示にするショートカットがあります。

Chrome は__web-inspector-hide-shortcut__要素にクラスを追加しますが、それは次のようなものですvisibility: hidden。

display: none/block要素のスタイルを変更する同様のショートカットはありますか? クリックすると、属性が追加style='display: none;'されてトグルされnone/blockますか？

score 3 · Accepted Answer

そのような近道はありません。代わりにできることはbackspace、要素を DOM から削除し、cmd+zを使用して元に戻すことです。

score 1 · Accepted Answer

この chrome 拡張機能をインストールしてみてください:

デフォルトの css をオーバーライドします"visibility: hidden"。"display: none"

私は著者ではありませんが、アイデア/実装は単純です。ソースを参照してください

ほとんどの場合、CSSレイヤーを1つ追加するだけです

から

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

に

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

3 に答える 3