In Chrome clicking "h" key in elements tab of devtools panel should toggle the hide/show

display-none-h-key-devtool.js

var cssRule = `.__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ * {
    display: none !important;
}`;



function injectStyleRulejQ(rule, id) {
    var div = $("<div />", {
        html: '&shy;<style id=' + id + '>' + rule + '</style>'
    }).appendTo("body");
    div.hide();
}

function injectStyleRule(rule, id) {    
    var elem = document.createElement('div');
    elem.innerHTML = "<style>" + rule + "</style>";
    elem.id=id;
    elem.style.cssText = 'display:none';
    document.body.appendChild(elem);        
}

injectStyleRule(cssRule, "display-none-shortcut");


//https://stackoverflow.com/questions/34938460/is-there-a-shortcut-to-toggle-display-none-block-in-elements-style-in-chrome