Internet Archive. If you find yourself often using this, consider donating to them for the insane amount of charity they do for the web ecosystem. If you don't have the cash to spare, perhaps consider signing up for an account to browse their huge catalogue of online books.
document.querySelectorAll("*").forEach(
(elm, _) => {elm.style.boxShadow="0 0 0 1px red inset"}
);
Show the box model of the page by putting a bright red box around everything. See that the nesting looks good and nothing's chunky or broken. This is super valuable for spotting inline elements inside block elements, or links with a click target that is bigger than the visible parts of the element. It also helps debug a wide variety of other CSS and box model issues. This is by far the bookmarklet I use most.
const newWindow = open();
const agentGlobals = new Set(Object.keys(newWindow.window));
newWindow.document.documentElement.innerText = (
Object.keys(window)
.filter((key) => (!agentGlobals.has(key)))
.sort()
.join("\n")
);
This lists all the global variables on the page. Super handy to start to understand a site's code and APIs. It just compares the globals of the tab to that of a blank tab. It then uses said blank tab to list the unique global properties of the current tab, one per line. It's also a great gauge of how clean the devs are being about state. You wouldn't believe all the junk you often find.
window.location = window.location.href.replace(
/(.*)(\d+)(.*)/,
(_, start, num, end) => (
`${start}${parseInt(num) + 1}${end}`
),
);
Wardialing the URL continues to work to this day. Not perfect, not efficient, but a handy hammer when you spot a nail.
document.querySelectorAll("img").forEach((elm) => {elm.src = ""});
This sets every <img>
tag's src attribute to an empty string which should break most images on the page. This won't break CSS based images. This just helps catch issues around alt text and graceful degradation of the site.
[...document.styleSheets].forEach((sheet) => {sheet.disabled = true});
This disables all the CSS on the page. Both a graceful degradation test and super crude accessibility first pass. This helps catch a lot of insane sized images/SVGs, menu hells, and JS that assumes styles are working. It's not perfect. It doesn't catch CSS issues from assumed agent defaults or that older user agents aren't left with a mess of half working styles. On the other hand, every bit helps.
document.querySelectorAll("body *").forEach((elm) => {
if (getComputedStyle(elm).position === "fixed") {
elm.style.position = "absolute";
}
)
Convert sticky elements (those that block valuable screen real estate) into fixed elements (so they scroll with the page). It's not perfect because some sites do funky things, but it at least tries to get rid if this design sin without completely deleting the element.