One of the best features of modern browsers is utilising add-ons/plugins/extensions that enable you to add functionality, neat tools and useful features. Below is a list of some of the my favourite add-ons for web development, design, SEO and related services. These are the tools that I use (on either Chrome or Firefox) on a regular basis:
1. Web Developer
If you’re a website designer and you’re not aware of this one then – where have you been?
I’d recommend this plugin for its inline editing alone, which can save precious time in fixing CSS bugs and testing website flexibility with adding HTML.
- CSS inline editor
- Outline Elements (Block, Inline, Tables, etc)
- Window resize (with presets)
- View Generated Source
- Information > View Document headers, Details, Size and so on
I like MeasureIt because of its simplicity: just click the button, then click and drag to get a size for your element.
Great for checking gutters and margins, quickly assessing the size of an element or for scoping out the size of a new banner.
An SEO toolbar, MozBar gives you an instant page and domain authority for any website (according to the Moz Linkscape). Various extra tools allow you to perform keyword analysis on the page, highlight followed vs nofollowed links, change your useragent string … and more. There’s also a button that loads the website into OpenSiteExplorer for extra link analysis.
The MozBar includes a SERP (search engine results page) overlay that gives an instant domain and page rank for websites in the results – extremely handy for evaluating site competitiveness at a glance.
A simple screenshot app that allows you to capture different areas, including:
- Entire page
- Visible page
- Entire browser window
You can then choose to save, copy to clipboard, email, print and so on.
Another developer plugin, Firebug enables inline HTML and CSS editing, as well as a JS console.
One of the most useful features in the ability to ‘inspect’ elements within the page – allowing you to identify chunks of code within the markup and CSS. This is great for finding and fixing troublesome bugs as you develop.
ColorZilla is an eyedropper/colour picker for Firefox and Chrome.
It’s quick and simple to use: the eyedropper will give a Hex and RGB value for your colour and clicking also adds the hex to your clipboard.
The utility also gives you a quick link to the ColorZilla gradient editor/creator – a fantastic little utility that creates the CSS for any gradient you care to specify. The CSS is generated with browser-specific prefixes for those not yet with CSS3 gradient support.
If you’re struggling to identify a font WhatFont saves you from trawling through a CSS file to track it down.
Just click the button, then the text on the page and voila! You get the font family, style, size and line-height.