12 Must Have Web Developer Bookmarklets
19 Aug 2009I’ve been reviewing my blog statistics and as expected (from my developer audience) 52% of traffic is from Firefox, Internet Explorer comes in around 27%, Google Chrome takes about 14%, and Safari, etc… take the rest.
Although Google Chrome only has 14%, that is pretty impressive considering that it is a relative newcomer to the browser scene.
Without a mature browser plugin model, it can be limiting when working with Google Chrome when doing web development… unless, that is, you have a great set of bookmarklets!
I have found that these 12 bookmarklets bring Google Chrome into a much more productive browser while doing web development.
Note: You can test out the bookmarklet by clicking the link or you can save it to your browser by dragging it up to your toolbar. Each bookmarklet has a Details link next to it that describes the functionality in further detail. If newer versions of the bookmarks exist, then they probably can be found from the Details link.
01. Firebug Lite (Details)
One of the most frequently used tools for any web developer is Firefox’s Firebug plugin. If you feel that your hands are tied when using another browser, then don’t you fret… Firebug Lite to the rescue! You can use this bookmarklet to simulate many of the features of the full Firebug plugin.
This bookmarklet enables you to inject jQuery into a webpage that didn’t previously have it loaded on startup. If the website already included jQuery, then a message will indicate which version it has loaded.
03. WTFramework (Details)
If you ever have visited a website and was like, “What… that is awesome! I wonder what JavaScript framework they used to developer that awesome website!?!” then this is the bookmarklet for you :) A small rectangle will show up in the upper-right corner of the page indicating if any of the following frameworks were used… (MooTools, Yahoo User Interface, jQuery, Scriptaculous, Dojo Toolkit, Mochikit, etc.)
04. jQuery Plugin Detector (Details)
In the same light as the previous bookmark, you might also wonder which plugins were used when developing a particular website. Instead of digging through the View Source you can just click this bookmarklet to reveal a little window that reveals you all the jQuery plugins loaded for the current page.
05. SelectorGadget (Details)
This bookmarklet is good for either a novice or expert alike. If you are needed some assistance creating a jQuery selector then try out this bookmarklet… it could surprise you with its quick and easy results. Once clicked, the bookmarklet inserts a command prompt at the bottom of your page and you interact with the DOM to help narrow down your selection. For more information, check out the short video exercising the features.
06. 960 Gridder (Details)
If you happen to be using the 960 Grid System, then this plugin can become very helpful when laying out your website. This bookmarklet will overlay a grid layout on top of your page. There are several options you can modify to fit your specific needs.
There comes a time in most web development when you need to measure the dimensions of something on your webpage. This is where this bookmarklet comes in handy. There are several options to measure things in your DOM. It is pretty straightforward. Just click and drag :)
This is an interesting bookmarklet that redirects the current page to the BuiltWith service that interrogates the page to determine the server information, analytic tools, javascript libraries, frameworks, content delivery networks, aggregators, etc…
09. W3C HTML Validator (Details)
This bookmarklet will redirect the current page to the W3C Markup Validation Service to reveal any errors and/or warnings in the document. As you can tell, it looks like I have a little clean-up work in my templates & blog posts :)
10. W3C CSS Validator (Details)
This bookmarklet will redirect the current page to the W3C CSS Validation Service to reveal any issues that do not conform with the official standards. Again, it appears I have some cleanup work to do on this blog :)
11. PageZipper (Details)
This isn’t exactly a hard-core web development bookmarklet, but I added it because I find that it saves time during the research and development stage. As I’m surfing around Google (or really any website that has a Next link/button) it gets pretty old to click the next button all the time. This bookmarklet will automatically retrieve the next results and load them dynamically into your current page once you have scrolled near the end of the page. It works well with Google, Twitter, and even my blog :)
As I scour the internet in search of the best and newest technology news, tools, plugins, etc… I have found the best tool to extract the title & URL for Twitter distribution is the BigTweet bookmarklet. A recent feature added to BigTweet has been the Delicious integration, which I use frequently. Although I tweet from BigTweet often, I usually just use it as an extraction tool and then transfer the Twitter text to a scheduler program.
