Created
September 3, 2021 05:33
-
-
Save vitalyfriedman/14d5f577b2bdefa1d678d8cc98aa02e2 to your computer and use it in GitHub Desktop.
Debugging Bookmarklet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
javascript:(function(){ let style = `<style>:root { --violation-color: red; /* used for clear issues */ --warning-color: orange; /* used for potential issues we should look into */ } /* IMAGES */ /* * Lazy-Loaded Images Check * ==== * Highlight any lazy loaded images so we can see if any are inside the viewport * * Uses an outline so it can pair with Unsized Images and Legacy Format checks * Credit: https://twitter.com/csswizardry/status/1346477682544951296 */ img[loading=lazy] { outline: 10px solid var(--warning-color) !important; } /* * Unsized Images Check * ==== * Highlight images that don't have a height or width attribute set * * Uses a border so it can pair with Lazy-Loaded and Legacy Format checks */ img:not([height]), img:not([width]) { border: 10px solid var(--violation-color) !important; } /* * Legacy Format Check * ==== * Highlight tiff's and bmp's because we can do better * Also JPG's because maybe we can use something like webp or avif instead * * Use opacity so we don't conflict with Lazy-Loaded and Unsized Images checks */ img[src*='.gif'], img[src*='.tiff'], img[src*='.bmp']{ opacity: .5 !important; } /* SCRIPTS */ /* Synchronous Scripts Check * ==== * Display any blocking synchronous scripts * * Credit: https://twitter.com/csswizardry/status/1336007323337285633 */ head, script[src] { display: block; border: 10px solid var(--violation-color);; } /* * Display the URL/filepath of external scripts */ script[src]::before { content: attr(src); font-size: 1rem; } /** * Hide other head content and non-blocking scripts */ head *, script[src][async], script[src][defer], script[src][type=module] { display: none; }</style>`;document.head.insertAdjacentHTML("beforeend", style);})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment