Esiste una scorciatoia per attivare "display: none/block" nello stile dell'elemento in Chrome DevTools?

Question

In Chrome DevTools c'è una scorciatoia per mostrare/nascondere un elemento:

Chrome aggiunge __web-inspector-hide-shortcut__ classe all'elemento, ma non è niente più che visibility: hidden:

C'è una scorciatoia simile per cambiare lo stile display: none/block dell'elemento? Quindi al clic aggiunge l'attributo style='display: none;' e lo abilita o lo sostituisce none/block?

Answer 1

Non esiste una scorciatoia. Quello che puoi fare invece è usare lo spazio backspace per rimuovere l'elemento dal DOM e cmd + z per riportarlo indietro.

Answer 2

tenta di installare questa estensione Chrome:

亲爱的.web-inspector-hide-shortcut

questo sovrascrive il CSS di default da "visibility: hidden" a "display: none"

Anche se, io non sono l'autore, l'idea/implementazione è semplice, vedere source

Praticamente basta aggiungere uno strato ulteriore css

.210

da

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

a

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