A bookmarklet is a JavaScript-based bookmark that adds to a web browser. I’d like to show you some awesome web browser hacks to aid your web development workflow and how to convert those hacks into time-saving bookmarklets.
- Activating design mode
- Applying a background to everything
- Simulating events
- Setting cookies
- Toggling classes
- Color widget bookmark
- What other bookmarklets can you think of?
Activating design mode
Design mode (styled as designMode
since it’s a JavaScript property) is for who like to experiment with variations of copy on a live website. For example, copywriters who like to observe how content reads within the flow of the website’s design, or, say, designers who want to ensure that text fits comfortably within a certain space at a certain font size.
JavaScript has a mightily simple feature that can render an entire HTML document editable. It works exactly like HTML’s contenteditable="true"
name-value attribute (or contentEditable="true"
in JavaScript) but for the whole document. If you’d like to see how it works, start by entering the browser’s console using the relevant keyboard shortcut:
- Chrome: Option + ⌘ + J / Shift + CTRL + J
- Firefox: Option + ⌘ + K / Shift + CTRL + K
- Safari: Option + ⌘ + C / Shift + CTRL + C
Next, type document.designMode="on"
into the console, hit Return, and then click on any text element. You’ll see that this text element (and all other text elements) are now editable simply by clicking on them. This method of editing text on a live website is much faster than having to open DevTools, then right-clicking and selecting the “Edit Text” option… and much less tiresome.
![Showing an edited version of the CSS-Tricks guide landing page using the design mode bookmarklet.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/02/s_AD0F2C835CD10D108AFDFB2358D3DFA61BF124F97B3700E8E7CBFF36E9EAA31B_1644463898776_1.png?resize=2880%2C1800&ssl=1)
While I’m not sure that “design mode” is the most accurate description of the feature, it’s super useful nonetheless and it’s actually been around for a really long time, surprisingly.
And what’s even an even faster way to enable it? A bookmarklet, of course! Create a bookmark using javascript: document.designMode="on";void 0;
as the URL.
![Showing the bookmarklet installation.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/02/s_AD0F2C835CD10D108AFDFB2358D3DFA61BF124F97B3700E8E7CBFF36E9EAA31B_1644463919258_2.png?resize=2880%2C1800&ssl=1)
Applying a background to everything
When HTML elements don’t have backgrounds, it can be difficult to visualize their bounds and/or accurately measure the distance between them and other elements. Developers might want to better visualize bounds when dealing with optical imbalance (i.e. when something “looks off” even though it’s not), margin collapse (when certain margins are ignored), various issues with display:
/float:
/position:
, and more.
Applying backgrounds means applying a semi-transparent background to all HTML elements in order to better visualize their bounds and spacings. It’s something many of us commonly do by opening up DevTools then typing a CSS declaration like selector { background: rgb(0 0 0 / 10%); }
into the “Styles” box. But again, it’s really tiresome and repetitive — and something we can simplify with a bookmarklet.
Once again, to create a bookmark, we’re going to make a URL. Here’s what we can use for this one:
javascript: document.querySelectorAll("*").forEach(element => element.style.background="rgb(0 0 0 / 10%)");
We’re using a semi-transparent background because the transparency stacks, which ensures that every nested element is distinguishable and the distances between them can be measured.
![Showing the CSS-Tricks guides landing page with all backgrounds fill with varying shades of gray.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/02/s_AD0F2C835CD10D108AFDFB2358D3DFA61BF124F97B3700E8E7CBFF36E9EAA31B_1644463956113_3.png?resize=2880%2C1800&ssl=1)
Simulating events
Have you ever had to test a web event that first requires a series of interactions, or certain conditions to be met? It’s super time-consuming to have to test or debug these kinds of functionalities. This event simulation bookmarklet can be used to instantly trigger specific events, making testing a breeze.
Simulating an event means coding a “throwaway” button that triggers a JavaScript event, making it much easier to quickly and repeatedly test the event without having to meet any usual user-facing conditions, like needing to be logged in.
Assuming that you have your JavaScript event listeners set up, create a bookmark for each event that you’d like to trigger/simulate and submit the following URL:
javascript: document.querySelector("SELECTOR").click();
Replace “SELECTOR” with your unique selector, replace “click” with “focus” or “blur” (when necessary), or extend the snippet to make it trigger more complex events, like scroll.
Setting cookies
Cookies are tokens that are stored on a website visitor’s computer by the website that they’re visiting. Cookies contain data that can be read by the website that created them until they’ve exceeded their expiration date or have been deleted. The mere existence of a cookie can determine whether or not a visitor is logged in, whereas the data itself can store user information.
An example of a scenario where you might want to set a cookie using a bookmarklet is when you want to force a logged-in state during website testing. Websites often look very different for users that are logged in, however, logging in and out eventually becomes very tedious, so this bookmarklet can save quite a bit of time.
Manually writing expires=
dates for cookies is awkward as heck, but luckily this create-your-own-set-cookie-bookmarklet app can generate a bookmarklet for a specific cookie, if you know its exact name.
Toggling classes
You may want to add or remove a class from an HTML element in order to trigger a fresh state or a change in appearance, otherwise known as toggling classes. Class toggling happens behind the scenes of most live websites, but it can also be used during testing to skip having to meet certain user-facing conditions.
Class toggling can be used to trigger changes in appearance (e.g. alternative themes or states) and even animations, but it can be a little fiddly when doing it with developer tools when it’s only for testing reasons (i.e. the website doesn’t actually function that way for users). Similar to the other bookmarklets, use this one to rapidly toggle classes and save yourself time.
Create the following bookmarklet to target all elements that match your chosen “SELECTOR”, which, in turn, toggles the “CLASS.”
javascript: document.querySelectorAll("SELECTOR").forEach(element => element.classList.toggle("CLASS"));
Color widget bookmark
While not technically a “bookmarklet,” this bookmarkable data URI by Scott Jehl opens up an <input type="color">
in a new tab:
So hey here’s my new color picker app!
— Scott Jehl (@scottjehl) August 19, 2021
It’s um, just an HTML color input wrapped in a data URI so I can bookmark it. (Feel free to do so yourself):
data:text/html;charset=utf-8,%3Chtml%3E%3Ctitle%3EColor Picker%3C%2Ftitle%3E%3Cinput type%3D”color”%3E%3C%2Fhtml%3E pic.twitter.com/0QyFqAsUSq
data:text/html;charset=utf-8,%3Chtml%3E%3Ctitle%3EColor Picker%3C%2Ftitle%3E%3Cinput type%3D"color"%3E%3C%2Fhtml%3E
Why is that cool? Well, how many times have you needed to grab a color value off a page, only to find yourself cracking open DevTools, clicking through a bunch of elements, and pouring over CSS properties to find the value? Better to run this little guy, click the element, and get a color right away!
What other bookmarklets can you think of?
Are there any overly repetitive web development workflows that require you to use the web browser’s sometimes-awkward developer tools? If so, it’s super easy to create your own time-saving bookmarklets. Just remember to start the URL with javascript:
!
And if you’ve made a bookmarklet to simplify your workflow, I’d love to see it! Share them here in the comments and let’s get a nice collection going.
Eruda! DevTools for Mobile devices
I wish we could open that color picker in a small popup. I tried window.open, but it doesn’t seem to work with data URLs.
I might just host a web page with just a color picker on it and use the bookmarklet to open it in a small popup.
Use it.
This works in my chrome.
More information:
window.open(url, target, windowFeatures);
I set windowFeatures so that the window is bottom left and as small as possible. Then I add ” to the body. And then I reload the page because my active tab which I want to check also adds ” to the body. So it works
One thing that you can do, Joe, is append
<input type="color">
to the document. Untested, but maybe something like this?Appending to head should render it unstyled.
This works. It opens an empty window, and then appends the
input
element to thedocument
of it.@Daniel Schwarz, good one ;)
But if you hide it by clicking on the page and want to show it again it throws an error.
Here is a small amelioration to make it appear everytime :
javascript:document.head.append(document.createElement("input").setAttribute("type","color"));input.click();
I have a bookmarklet that renders the URL of the current page as a QRcode in a small popup window. This allows me to easily load any page for testing on multiple mobile devices.
Amazing. Please share it!
Chrome desktop does this natively, click the little arrow on the right of the address bar.
I’ve got a bookmarklet for layout debugging that puts different colored borders (based on relationships) around all elements on a page:
Plus, where is the love for the CSS-Tricks “Printliminator” Bookmarklet?
The apply background one is nice, but I’ve always been a fan of this version, it’s the same, except it’s colorful (allowing to see depth as well)
javascript: (function (){let domStyle=document.getElementById('domStylee');if(domStyle){document.body.removeChild(domStyle);return;} domStyle=document.createElement('style');domStyle.setAttribute('id','domStylee');domStyle.append(['* { color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }'],['* * { background-color: rgba(0,255,0,.2) !important; }'],['* * * { background-color: rgba(0,0,255,.2) !important; }'],['* * * * { background-color: rgba(255,0,255,.2) !important; }'],['* * * * * { background-color: rgba(0,255,255,.2) !important; }'],['* * * * * * { background-color: rgba(255,255,0,.2) !important; }'],['* * * * * * * { background-color: rgba(255,0,0,.2) !important; }'],['* * * * * * * * { background-color: rgba(0,255,0,.2) !important; }'],['* * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }'].join());document.body.appendChild(domStyle);})();
@Khodok – Thanks – it toggles too.
Just because the design mode bookmarklet needs to support toggling ;)
javascript:document.designMode=(document.designMode=="on"?"off":"on");void 0;
Toggling it doesn’t revert the text back to normal, so I tend to just refresh. But nice!
I really like bookmarklets. Here are some of my favorites:
Disable Form Validation
To test server side form validation, I disable client side validation in all forms. This allows sending forms with errors and check if the server side correctly handles those errors.
Remove Overlay
This generates a one-time click handler, which will remove the next element, I click on the page. I use this mostly to remove anoying overlays, newsletter banners, privacy notices etc.
Generate Anchor
This binds a one-time click handler, which generates an anchor for the next clicked element, if it has an ID. This makes it easy to share links to specific elements on a page, if all elements are wrapped with an element which has an ID.
For example, I click the bookmarklet, than I click on the heading here in the article and my address bar changes to
Invalid URL, according to Chrome. Tried removing all spaces and newlines, but didn’t help
Has anyone been able to get Bookmarklets like these to work in Microsoft Edge? I’m on Version 98.0.1108.92 and haven’t been able to get them to run.
Yes, no problem with bookmarklets in Edge latest.
@DustinHart. Yes managed it in MS Edge. Whereas I am accustomed to hitting ctrl + D to “Add favourite / favorite” this doesn’t work for saving a bookmarklet. What I had to do was Ctrl + Shift + O (that’s O for Oscar), find a entry I wanted to become a bookmarklet, right click ‘Edit’ it then change its URL field by hand to JavaScript: ….some_js_code_etc
BTW great and interesting article. Much more interesting than my bookmarklets which are for boring things like removing Ads from Amazon of killing the GDPR consent modals
@DanielSchwarz One thing you may want to consider to make your bookmarklets more-reusable is to allow the user to specify the SELECTOR each time they use it rather than having to edit the bookmarklet itself.
For instance you ‘Simulate CLick’ bookmarklet would become.
javascript:!function() { let s=prompt('Selector?','');void(document.querySelector(s).click());}()
Nice! Definitely a better approach if you have a lot of bookmarklets to manage.
@DanielSchwartz. Thanks. This was a good article to post as a lot of good ideas have been bandied about.
These bookmarklets are great. I will definitely make use of the design mode and color picker in my work.
I experimented with a gulp setup for creating complex bookmarklets with UI elements. As a concept, I made a Music-Bookmarklet which looks for mp3 links on your current page and creates an audio player with the songs in a playlist.
To create simple bookmarklets, I like the Peter Coles Bookmarklet Creator
Here’s one for finding overflow. It adds both a red outline of 1px and a 3-way box-shadow so no matter what colour the element has as a background, you’ll find the culprit very easily.
Just for thoroughness it also adds a console log of the offending element.
Adrian Roselli also has a ton of usefull ones here: https://adrianroselli.com/2015/01/css-bookmarklets-for-testing-and-fixing.html
Open the current page in a page scanning service. For example PageSpeed Insights:
javascript:(function(){location.href='https://pagespeed.web.dev/report/?url=%27+window.location.href+%27&hl=en%27})();
Nice! I use Alfred + NPM + a
config.js
for this.I wrote a piece of code that highlights AND un-highlights elements:
javascript:document.querySelectorAll(‘body *’).forEach(function(el){let a = el.getAttribute(‘data-highlighted’);if(typeof a !== ‘undefined’ && a === ‘true’){let b = el.getAttribute(‘data-prev-bg-color’);if(typeof b !== ‘undefined’){el.style.backgroundColor = b;}else {el.style.backgroundColor=”initial”;}el.removeAttribute(‘data-highlighted’);el.removeAttribute(‘data-prev-bg-color’)}else {let c = el.style.backgroundColor;el.style.backgroundColor=”rgba(255,255,0,0.1)”;el.setAttribute(‘data-prev-bg-color’, c);el.setAttribute(‘data-highlighted’, ‘true’);}});
I have created a collection of some bookmarklets I use on https://bookmarklets.websec.blog/
Feel free to send a PR to add more useful bookmarklets
When you are on any WordPress page, login to WP, then return to the page you are on:
Inspect hidden passwords!
(() => { document.querySelectorAll('input[type="password"]').forEach(e => e.setAttribute('type', 'text')) })();