My Bookmarks Are All Bookmarklets

I love all my bookmarks. None of them actually go to any websites, though. They’re all bookmarklets.

A bookmarklet is a little app that runs in your browser.

Some of them have been around for years, and I recently got into the habit of making them again. Mostly, I just make them for repetitive or arduous tasks while debugging browser junk. I thought I would list out some of my favorites.

Source

This little love dumps the HTML source of the current page in a new tab. This isn’t very useful most of the time, but utterly invaluable when trying to debug a client from my smartphone on the L train at 2AM.

source

javascript:(function(){
    var a = window.open('about:blank').document, b;
    a.write('<!DOCTYPE html><html><head><title>Source of '+location.href+'</title><meta name="viewport" content="width=device-width" /></head><body></body></html>');
    a.close();
    b = a.body.appendChild(a.createElement('pre'));
    b.style.overflow = 'auto';
    b.style.whiteSpace = 'pre-wrap';
    b.appendChild(a.createTextNode(document.documentElement.innerHTML))
})();

Headers

I love finding little gems hiding in the headers of other websites. I try to put a bit of gold in the headers of websites I build myself. This one has helped test CORS issues, cookie issues, or even just satisfying curiosity about what stack competitors are using.

headers

javascript:(function(){
    var req = new XMLHttpRequest(), headers;
    req.open('GET', prompt('page?',document.location), false);
    req.send(null);
    headers = req.getAllResponseHeaders().toLowerCase();
    alert(headers);
})();

Toggle CSS

Many designers/developers use CSS as a whole lot of lipstick on a pig. Sometimes, it’s a lot easier to debug something without all that color getting in the way. This bookmarklet toggles the entire CSS structure on and off, so you can wipe it all away or put it right back.

toggleCSS

javascript:(function(){
    function d(a,b){
        a.setAttribute("data-css-storage",b)
    }
    function e(a){
        var b = a.getAttribute("data-css-storage");
        a.removeAttribute("data-css-storage");
        return b
    }
    var c = [];
    (function(){
        var a = document.body,
            b = a.hasAttribute("data-css-disabled");
        b ? a.removeAttribute("data-css-disabled") :
            a.setAttribute("data-css-disabled","");
        return b
    })() ?
    (
        c = document.querySelectorAll("[data-css-storage]"),
            [].slice.call(c).forEach(function(a){
                "STYLE" === a.tagName ?
                    a.innerHTML=e(a) :
                    "LINK" === a.tagName ?
                        a.disabled = !1 :
                        a.style.cssText = e(a)
            })
    ) :
    (
        c = document.querySelectorAll("[style], link, style"),
            [].slice.call(c).forEach(function(a){
                "STYLE" === a.tagName ?
                    (d(a, a.innerHTML), a.innerHTML="") :
                    "LINK" === a.tagName ?
                        (d(a, ""), a.disabled = !0) :
                        (d(a, a.style.cssText), a.style.cssText = "")
            })
    )
})();

Others

Here are some others, maintained by other people, that I use quite frequently: