If you are a Chrome user, you probably love it for it’s speed and simplicity. However, no matter how much you like simplicity, sooner or later you’ll need will add some extra functionality you desperately need. In such cases, it’s extensions to the rescue. If you were a Firefox user before you switched to Chrome (or perhaps you time-share between browsers), you probably already know that most of the Firefox add-ons you love are available for Chrome as well.
Today we’re going to look at some of the most useful Chrome extensions for designers. I am not writing about the Web Developer and Firebug add-ons that are emblematic for Firefox as they’ve been well covered elsewhere.
I’m also going to avoid the add-ons I reviewed in the 6 Great Firefox Extensions for Designers article, too. Not all of them are available for Chrome, but the ones that do include are: ColorZilla, YSlow, Open With (only Firefox and no Mac OS version). You might want to try them as well.
1. Overlay & wireframe extensions
One of the Firefox extensions I wrote about in the other article was Pixel Perfect. It’s great for overlays but unfortunately, it’s not available for Chrome, as it relies on Firebug. Instead, some good ones that do a similar job are Bootstrap Overlay or PerfectPixel by WellDoneCode. If you are dealing with wireframes, you might also want to try Instant Wireframe.
Bootstrap Overlay only works for sites built on the Bootstrap framework and currently it isn’t fully mobile-friendly, but still it’s an option for the many Bootstrap developers out there. In order to detect grids, the site obviously needs to be using the default Bootstrap container and span classes.
PerfectPixel is another overlay extension to try. It works with layers, so you can have multiple overlays on the same page. It’s easy to use. Simply load any JPG or PNG site mock-up into PixelPerfect, manually position over your working code, lock it in position, and reduce it’s opacity down to perhaps 20%.
As you work on your HTML — perhaps with LiveReload refreshing your page — you can constantly compare your rendered HTML and CSS to the original design work.
Instant WireFrame is for (surprise, surprise) wireframe overlays only. Install it and enable it and you will see the skeleton of any site. With some sites the wireframe isn’t very clear, but this is a problem with the design/coding of the site, not the extension.
Stylebot is an extension for working with CSS styles. It allows you to pick an element and change its font, color, margins, etc. manually in the Web browser. You can save your styles for later use, or you can install from stylebot.me styles other users of the extension have created and shared.
Although Stylebot is generally used as a GreaseMonkey equivalent, it can actually be used as a quick and dirty method to prototype changes and functionality. It’s fast and can gives you a functional demo in under 30 minutes. You can even demonstrate working code to a client without touching your codebase. It may not be right for every situation, but keep it in mind.
3. CSS3 Generator
CSS3 Generator is one more Chrome extension for handling Cascading Style Sheets. It’s an in-browser CSS editor and you can use it to generate:
- Border Radius
- Gradient Colors
- Box Shadow
- Text Effects
- Text Columns
- CSS Transitions
- Text Shadow
You see that some significant CSS properties are missing from the list, so it’s not an editor to handle all your CSS needs but still it does quite a lot.
4. Link checkers
Check My Links
Check My Links is pretty straightforward and very useful. Install it, run it, and in seconds you will have a report of all the links on a page and their status (OK or broken).
Of course, you can use other tools to check links sitewise but if you are interested in the links on a particular page only, this extension is much handier. The extension is fast, even on pages with hundreds of links and unlike comprehensive tools that check your whole site, you have to wait just a few seconds, not half an hour to get results.
5. Screen measurement tools
Ruul. Screen ruler
This is another simple but great Chrome extension. As the name itself implies, ruul. Screen ruler measures distances on screen. It’s the Chrome equivalent of the famous MeasureIt Firefox addon but it comes with many more options (not all of which you might need, though).
The developers features list includes:
- horizontal and vertical draggable rulers
- pixel and picas measurements
- drop down overlay
- type measurements
- line height guides
- stroke widths
- move ruul with arrow keys, one pixel at a time
- use multiple ruul together
- 4 different coloured ruul included
- steel and wooden ruul included
- turn on and off with position memory
- long rule included
- works on local files*
Warning: This extension is highly addictive. Once you get used to it, you will be measuring absolutely everything that can be measured on screen.
I’m joking here but really this extension is something you will soon not be able to live without and yes, it really does a great job.
6. Font extensions
Firefox has many font add-ons for designers. Chrome doesn’t offer quite as many, but still there are some really nice ones, such as the Font Playground and Font Inspector extensions, or the Web Fonts enhanced by TypeDNA application.
If you frequently work with Google Web fonts, then Font Playground is a must. Font Playground allows to choose a font, add various effects to it (if you want to), preview the results and get the code. The list of fonts is current because it’s updated every day.
TypeDNA is a Chrome application that also allows previewing Google Web fonts from a list. Double-click the font and the application auto-generates code you can copy and use in your projects.
The third extension for work with Fonts is Font Inspector. It’s really simple – install it, click it and move the mouse over the parts of the page you want to examine. The font name, line-height and size for this page element will be displayed in a tooltip format. Nice.
However, from personal experience, there are lots of pages where Font Inspector doesn’t work. This is likely for code structure reasons, rather than the extension itself but anyway, this means you can’t use it everywhere.
Another extension that I particularly like is Image Properties Context Menu. This shows lots of important image data at a glance. You might also like to check out Web Developer Checklist. This is not exactly for designers but still it is very useful for everybody who works on Web sites.
As you might guess by its name, the extension is a checklist of everything important you need to double check before you launch a site:
- So, have I missed any killer Chrome extension?
- And are there any Firefox extensions you miss since moving to Chrome?
This article was originally written by Ada Ivanoff and published on SitePoint. SitePoint provides cutting-edge content for web professionals — developers, designers, programmers, freelancers and site owners.