Five Useful Bookmarklets and Plugins

By on July 18th, 2012

I’m always looking for inspiration, checking my development work, and taking screenshots for projects I’m working on in Chrome/Safari. To streamline my workflow and learn more about my craft, I use a certain set on bookmarklets, plugins and add-ons. Here are five very useful plugins for web designers and developers:

1. Firebug

Firebug is a plugin that lets developers inspect the DOM and associated styles.

Most developers probably already know about Firebug. This incredibly useful plugin lets developers inspect HTML elements and their corresponding CSS styles to debug code, or to find out how other websites have achieved a certain effect. Firebug also allows users to modify both the HTML and CSS in real time to see how changes will affect the web page.

Firebug CSS metrics at work.

Aside from that, hovering over an element in Firebug shows CSS metrics: the padding, margins, width and height of elements come up as colored blocks. This is a great way to find out why there’s weird spacing or why elements aren’t lining up correctly when coding out a webpage.

Firebug also includes other features aside from viewing and editing code:

  • Monitor loading speeds of every element on the page
  • Debug, edit, log and monitor the performance of JavaScript
  • Find errors in JavaScript, CSS, and XML
  • View and manage cookies
This extension is mostly for Firefox users; Chrome already has a built in debugging function.

2. ColorZilla

ColorZilla lets you pick colors from any webpage.

An obsession with colors come with the territory of being a designer. ColorZilla allows designers to pick out colors directly from the webpage and copy the hexadecimal color code to use in their own projects or to make a color palette. This plugin is also helpful for developers who need to copy color codes from one part of a website, in order to use it on another element.

ColorZilla is more robust in Firefox than in Chrome, however. In Firefox, the color picker is easier and quicker to use – there are less clicks required in order to pick a color.

Firefox's ColorZilla add-on has a lot more packaged in than Chrome's plugin.

In Chrome, users would have to open the ColorZilla widget, click “Pick color from webpage,” choose a color, open the widget up again, choose the last color picked, and finally copy the code. In FireFox,users just click the ColorZilla icon, pick a color, and the color code is automatically copied to the clipboard. Firefox’s ColorZilla add-on also gives us access to RGB values, X/Y coordinates, position in the DOM, CMYK values, gradient generators, and copy/paste CSS codes.

3. MeasureIt!

Get the height and width using MeasureIt!

MeasureIt is a ruler extension used to measure elements in your browser; it’s available for Chrome, Firefox and Safari. Meant for web designers and developers, this tool measures areas of a page by its width and height in pixels.

Measure also serves as a straightedge to see whether elements of a page line up exactly. You won’t need to hold a book up to the screen anymore, Taylor!

4. Aviary Screen Capture

Capture a screenshot of an entire page.

Aviary is awesome. They’ve created a whole set of great tools for creatives, from music editors to vector editors to image markup, including a screenshot plugin. Their screen capture plugin is a complete lifesaver for anybody who needs to take screenshots of webpages.

What makes Aviary different from just taking a screen capture using your system’s native screenshot tools is that Aviary allows you to take an image of a whole webpage. Instead of just capturing everything above the fold, Aviary captures the page from header to footer. Of course, there’s also an option to capture just a portion of a screen, which is useful for PC users (since that feature is available for Macs already).

After taking the screenshot, Aviary allows users to annotate and make edits to the image before they save it. Users can crop the screenshots, include text, and add shapes, lines and arrows. There’s a more advanced editor/image effects, but simply saving the image and bringing it into Adobe CS programs might be more beneficial.

5. StumbleUpon

StumbleUpon Toolbar

StumbleUpon is a browser extension that brings its users to new and interesting websites, depending on their interests. While StumbleUpon is known more as a procrastination tool than something useful (rage comics all day!), the StumbleUpon add-on allows users to stumble on pages in a certain interest only.

By turning off all other interests and only focusing on web design (or graphic design/web development/internet tools), users can discover lots of great articles, tools, and inspirational websites. StumbleUpon is actually how I found out about all the other browser extensions in this blog post!

These are the browser extensions I use on a daily basis. If I missed a good one, let me know in the comments!

Share
back to top

2Comments

Leave a comment