Browser Bookmarklets Worth Adding to Your Dev Workflow

A bookmarklet is just a bookmark that stores JavaScript instead of a URL. Click it, and the script runs against whatever page you're currently viewing. That makes it a handy way to automate little browser chores you'd otherwise repeat manually in DevTools. Below are several I've collected, along with the code to build each one.

Edit Any Page's Text Instantly

Turning on the document-level designMode property makes every text node on a page editable, just as if each one had contenteditable="true" applied. Instead of opening DevTools, right-clicking an element, and choosing "Edit Text," you can toggle this mode with a single click.

To try it manually first, open the browser console (Chrome: Option + ⌘ + J on macOS, Shift + CTRL + J on Windows; Firefox: Option + ⌘ + K or Shift + CTRL + K; Safari: Option + ⌘ + C or Shift + CTRL + C). Then run:

document.designMode="on"

Click any text on the page and you can edit it immediately. To package this into a bookmarklet, use the following as the bookmark URL:

Showing the bookmarklet installation.

Visualize Element Bounds

Diagnosing layout problems like optical imbalance, collapsed margins, or odd display:/float:/position: interactions often comes down to seeing where elements actually begin and end. When backgrounds are missing, that's hard to judge. A quick trick is to give every element a semi-transparent background. Because the transparency stacks with nesting, deeper elements appear darker, which makes their boundaries—and gaps between them—much easier to measure.

Normally you'd have to add a rule like selector { background: rgb(0 0 0 / 10%); } in DevTools and hope you targeted the right element. Instead, build a bookmark with this URL to apply it to everything on the page:

javascript: document.querySelectorAll("*").forEach(element => element.style.background="rgb(0 0 0 / 10%)");
Showing the CSS-Tricks guides landing page with all backgrounds fill with varying shades of gray.
Apply a background to everything to see what’s happening.

Fire Events on Demand

Some events are tedious to reproduce during testing because they only trigger after a long chain of user interactions or other conditions are met (like being logged in). If your event listeners are already in place, you can write a tiny "throwaway" trigger that fires the event programmatically.

Create a separate bookmarklet for each event you want to simulate, using this pattern:

javascript: document.querySelector("SELECTOR").click();

Replace SELECTOR with a real CSS selector, and swap "click" for other event types like "focus" or "blur" where relevant. The snippet can also be extended to dispatch more complex events such as scroll.

Logged-in and logged-out states often render entirely different layouts. If you spend a lot of time testing behind an auth wall, repeatedly entering credentials becomes a chore. A bookmarklet that sets the right cookie can put the browser into the desired state on demand.

Hand-writing the awkward expires= date string is a pain, but a dedicated generator tool—the create-your-own-set-cookie bookmarklet app—will build the bookmarklet code for you as long as you know the exact cookie name and its value.

Toggle Classes Quickly

Many sites switch themes, open menus, or trigger animations by toggling a class on an element. Reproducing those states in testing manually is fiddly when you're not going through the actual user flow. This bookmarklet cycles the class on every element matching your selector:

javascript: document.querySelectorAll("SELECTOR").forEach(element => element.classList.toggle("CLASS"));

Update SELECTOR and CLASS to the values you need in a given test scenario.

A Bookmarkable Color Picker

Scott Jehl shared a neat variation on the bookmarklet idea: a data URI that, when bookmarked, opens a native <input type="color"> widget in a new tab. The URI itself is simple:

data:text/html;charset=utf-8,%3Chtml%3E%3Ctitle%3EColor Picker%3C%2Ftitle%3E%3Cinput type="color"%3E%3C%2Fhtml%3E

data:text/html;charset=utf-8,%3Chtml%3E%3Ctitle%3EColor Picker%3C%2Ftitle%3E%3Cinput type%3D"color"%3E%3C%2Fhtml%3E

No DevTools spelunking through CSS rules to find a hex value—just click the bookmark, pick a color, and copy the result.

Building Your Own

The same principle applies to any repetitive browser action: wrap it in a JavaScript URL, and you've got a one-click shortcut. Start the bookmark's URL with javascript: and you're done. If you come up with something handy for your own workflow, consider turning it into a bookmarklet too.