Bookmarklet to toggle a debug grid on a webpage

debug-grid-bookmarklet.md

JS Snippet

Here is the JS snippet that you can execute in the console window to toggle a debug grid on your page:

(function() {
    if (!window._DebugGrid) {
        window._DebugGrid = document.createElement('div');
        window._DebugGrid.style = `
	    display: none;
	    top: 0;
	    left: 0;
    	    height: 100vh;
    	    width: 100vw;
    	    position: fixed;
    	    z-index: 10000;
    	    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left;`;
        document.body.appendChild(window._DebugGrid);
    }
    window._DebugGrid.style.display = (window._DebugGrid.style.display === 'none' ? 'block' : 'none');
})()

Bookmarklet

An easier way to use it is to save it as a bookmarklet. Here is a minified version of the snippet. Copy it, create a bookmark with the URL as the snippet:

javascript:(function(){if(!window._DebugGrid){window._DebugGrid=document.createElement('div');window._DebugGrid.style=`display:none;top:0;left:0;height:100vh;width:100vw;position:fixed;z-index:10000;background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=)repeat top left;`;document.body.appendChild(window._DebugGrid);}
window._DebugGrid.style.display=(window._DebugGrid.style.display==='none'?'block':'none');})()

Reference

Inspired by Tachyon debug grid