Eat, sleep, code.

Making Bookmarklets Cool Again 7/31/2015

Making Bookmarklets Cool Again

At some point Bookmarklets died and no one played their dirge.

If you don’t know what a bookmarklet is, it’s a small piece of javascript code embedded in a bookmark. In some cases, the script injects a javascript file into the the website where the bookmark was clicked. This injection is makes them super useful but is probably also what made them disappear. 

XSS (Cross-site scripting) is a topic for another day, but you should beware of it you're not. Go look it up, I’ll wait. No really, this article will still be here when you get back.

In the past few weeks, I’ve been creating some interesting bookmarklets to help with my web development. Some of these I’ve found, others I’ve created (mine). To use them, simply drag each headings link to your bookmark bar.

Last Modified:



Want to know the last time an asset was updated? Do note that this bookmarklet only works with static content. It won’t work on server side rendered content like Asp.Net or PHP. If the alert shows you today, right now, it’s most likely dynamically generated.



“BuiltWith is a website profiler, lead generation, competitive analysis and business intelligence tool providing technology adoption, ecommerce data and usage analytics for the internet.”


BuiltWith shows you what technology a website is built on. Does this site use WordPress? jQuery? Windows Server? Apache?

Add jQuery:

javascript:if(typeof jQuery=='undefined') {var s = document.createElement('script');s.type = 'text/javascript';s.src = 'https://code.jquery.com/jquery-2.1.4.min.js';document.getElementsByTagName("head")[0].appendChild(s);}

Fiddling with someone else’s website and want to use jQuery in the console? Just use this bookmarklet and poke away.


javascript:(function(){var tota11y=document.createElement('SCRIPT');tota11y.type='text/javascript';tota11y.src='//khan.github.io/tota11y/tota11y/build/tota11y.min.js';document.getElementsByTagName('head')[0].appendChild(tota11y);})();

 This bookmarklet comes courtesy of khanacademy.org. “tota11y helps visualize how your site performs with assistive technologies.”


Find more at http://khan.github.io/tota11y/

WhoIs: (mine)


Who’s behind that domain name? Get the current domain’s registrar, and register-er, and DNS servers.

Note: this could easily be changed from NameCheap to something else, but NameCheap is probably more awesome than your registrar of choice so just leave it.

MX Records:(mine)


MX Toolbox has some seriously cool web tools, including MX Record lookup by domain name. This bookmarklet will take the current domain and pass it on to their SuperTools. You cou easily adapt this to get any of the prefixes that MX Toolbox supports (dns,a,etc) just change action=mx to action=a.

ASafaWeb: (mine)


“Welcome to ASafaWeb, the Automated Security Analyser for ASP.NET Websites. The purpose of ASafaWeb is to make scanning for common configuration vulnerabilities in live ASP.NET websites dead easy. To that effect, you don't need anything more than a URL to get started and ASafaWeb will head off and report on anything it can find which is remotely detectable.”

While ASafaWeb is directed at .Net sites, there is still some valuable information for you none-.net-ers. Check for custom 404 errors, bad url checking, cookie information and excessive header information.


+ Pocket

(You have to login and get a custom bookmarklet code from Pocket)

“Pocket was founded in 2007 by Nate Weiner to help people save interesting articles, videos and more from the web for later enjoyment. Once saved to Pocket, the list of content is visible on any device — phone, tablet or computer. It can be viewed while waiting in line, on the couch, during commutes or travel — even offline.”

Pocket lets you save content to read later. One of the best features about Pocket is that it strips out all the other garbage so you can actually read an article — there’s a novel (pun intended) idea.


Get Pocket



The rest of the bookmarklets are about Bootstrap.

Bootstrap Visibility: (mine)

javascript:$('body').prepend('<span class="visible-lg label label-success">visible-lg</span><span class="visible-md label label-success">visible-md</span><span class="visible-sm label label-success">visible-sm</span><span class="visible-xs label label-success">visible-xs</span>');

Need to know what Bootstrap thinks the current device size is? Click this bookmark. It will add label to the top of the screen with text like “visible-lg”. 


Try resizing the browser after adding this. You’ll see it change along with the browser! No guess about which media queries are in use.


Bootstrap Column Highlighter: (mine)

javascript:$('body').append('<style>*[class^="col-"] { border: 2px solid green; }</style>');$('[class^=col-]').each(function () {    $(this).prepend('<div class="label label-success" style="top: 0; left: 15px;">' + $(this).attr("class") + '</div>');});

Highlight Bootstrap’s grid system (col-*-*). This bookmarklet will add a border around each element that has a class of col-*-* (col-md-6) and a label displaying what class(es) are applied.

This is helpful with the Bootstrap Visibility bookmarklet above so you can tell why an element looks the way it does and what will happen when the viewport is different.




This bookmarklet will add a small dropdown and allow you to change the site’s theme (sort of). It has Bootswatch’s predefined template selection so you can change the font colors and most of Bootstrap’s default styles.


Enjoy and let me know if you have any “must have” bookmarklets. Don’t be ashamed, we’re all in this together. Come on, I know you still use them.

comments powered by Disqus


© Copyright 2018