Có phím tắt để chuyển đổi "display: none/block" trong kiểu phần tử trong Chrome DevTools không?

Question

Trong Chrome DevTools có một phím tắt để hiển thị/ẩn một phần tử:

Chrome thêm __web-inspector-hide-shortcut__ lớp để nguyên tố này, nhưng nó là không có gì hơn visibility: hidden:

Có lối tắt tương tự để thay đổi kiểu display: none/block của phần tử không? Vì vậy, bấm vào nó thêm style='display: none;' thuộc tính và Toggles nó none/block?

Answer 1

Không có lối tắt nào như vậy. Thay vào đó, những gì bạn có thể sử dụng là sử dụng backspace để xóa phần tử khỏi DOM và cmd + z để đưa nó trở lại.

Answer 2

Cố gắng cài đặt tiện ích chrome này:

亲爱的.web-inspector-hide-shortcut

Nó đè css mặc định từ "visibility: hidden" để "display: none"

Mặc dù, tôi không phải là tác giả, ý tưởng/thực hiện rất đơn giản, xem source

Khá nhiều chỉ cần thêm một lớp css bổ sung

.210

từ

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

để

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