The ES6 bookmarklet can be easily shrunk by 13 characters, taking it to 121:<p>javascript:for(let e of document.querySelectorAll('link,style,[style]'))e.style.cssText?e.style.cssText='':e.outerHTML=''
Is there a way to remove the styles but apply some others instead which highlight the borders and natural layout of the elements?<p>Kind of like if you turned off styles and used the inspect feature of your browser but with all it's mouse-over highlights and guidelines turned on at once.
other approach: <a href="https://twitter.com/subzey/status/621672779344166912" rel="nofollow">https://twitter.com/subzey/status/621672779344166912</a>
A hack near and dear to my heart! The toggle bit on this is a very nice touch. I wrote something similar [0] a short while ago, except that, after the native styles are stripped, a very small amount of css is added to: constrain page width, make text a green monospace on black, improve line-height and remove images.<p>[0] <a href="https://github.com/kndyry/detox" rel="nofollow">https://github.com/kndyry/detox</a>