Quickly toggling elements in the Web Inspector
Here's one Web Inspector shortcut I didn't know about (although it's listed in the shortcuts): just press the h key in the Elements tab and the currently selected element will be hidden. What happens is that the __web-inspector-hide-shortcut__ class is toggled on that element, with the following CSS:
.__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ * { visibility: hidden !important; }
Now, maybe you don't want this hidden element to take up any space, and use display: none;? (In fact you can easily 'hijack' this shortcut and apply whatever CSS you want.) Just add these lines to your Custom.css:
.__web-inspector-hide-shortcut__ { display: none !important; }
Super easy quick toggling of DOM elements in the Web Inspector, yay! The Safari Web Inspector behaves somewhat similarly, but it doesn't use a class, and applies these properties inline instead:
pointer-events: none !important; opacity: 0 !important;











