When you’re in your element, web design and development is a joy. But the tedious work that frequently comes with this job can make you wonder why you chose this field. What you may not know is that Chrome has an extension store full of free tools that can help you cut down on the side work.
If you don’t use Chrome apps for your online work, the time to start is now. Here are an assortment of extensions that can make design and development cleaner, more efficient, and more fun.
Another program package for designers, CSS Peeper can extract CSS code nested in a website. Instead of digging through pages of code, you can use this extension to see object properties, export hidden assets, and more.
Ever been through the nightmare that is capturing a full webpage? Or spent too much time fussing with the crop tool? Awesome Screenshot is an essential extension that lets you take screencaps of any size, edit them, record the page, and more.
ColorZilla is a simple but essential program for designers. The main feature is its color picker, which can grab a shade from any webpage and give you the RGB/Hex/etc code to paste into your program of choice.
Other nifty features include the color picker and editor, gradient generator, and palette viewer. This one is invaluable for those who need to grab colors off websites quickly.
It’s necessary to test your site on other browsers and devices to be sure there’s no errors or inconsistencies, but it would be easier if you only had to use a plugin. Browserling lets you do just that, saving the time of starting and loading a second browser.
Also try IETab, which allows you to emulate Internet Explorer with Silverlight, Java, and other plugins.
There’s nothing more annoying than seeing a beautiful font and having no clue what it is. Luckily, WhatFont identifies the font family, type size, and even if it’s being served by Typekit or Google API.
If you find a font you like, but aren’t sure if it will work on your website, try Google Font Previewer to see how it matches up before you make any changes.
Need to extract a bunch of images from a page? Gallerify is the way to go. Grab those background pictures, use it to search to find what you’re looking for, and download a few thousand images at once. No more hunting down individual images, or digging through CSS for the hidden elements.
It’s imperative to ensure your website is responsive on mobile devices, especially if you run an online store. Many site building programs come with a responsive tester, but if you want faster results or don’t have access to these tools, try Window Resizer. It can test multiple screen resolutions, including smartphone and tablet.
It’s pretty frustrating when your website’s final result is just a tad off from the mockup. PerfectPixel lets you overlay an image over the screen while you’re editing, so you can make sure everything is just right.
Web Developer Checklist
Is your website the best it can be? Is it fast, clear of broken links, and secure? Before you unleash it to the world wide web, use Web Developer Checklist to be sure everything is covered.
Need to mark an area to come back to later, or trying to do some research? Highly lets you save and share your highlights across the web, so no more forgetting where you were in that article. Also try Evernote Web Clipper for a similar function.
Check My Links
There’s nothing worse than having to go through a link-filled page carefully scanning for broken links. Use Check My Links to clearly highlight the problem redirects, so you can spend time fixing the errors instead of clicking between pages for an hour.
When you need to know the distance between two elements, try Page Ruler. There are no frills in this extension, which is for the better. Simply pick a color and drag a box between what you want to measure. Note that some users have reported privacy issues with Page Ruler, so you can try the older version here, or an alternative like Ruler.
If you need a quick CSS debugger, try Pesticide for Chrome. It lets you see the location of the CSS elements on the page. Though very simple, you may find it useful for front-end development.
Being a designer on limited data can be a nightmare. All those images, downloads, and extensions can really add up! Data Saver seeks to optimize the sites you visit so you’ll use less of it. It also tells you which pages are using the most, so you can switch to a more data-friendly website. It’s no magic wand, but it’s better than nothing.
PHP Ninja Manual
Who doesn’t forget their coding every once in a while? Instead of wasting time refreshing your memory on Google, just open PHP Ninja Manual and type in what you’re looking for. Less time searching, more time programming.
If you’re like most freelance designers or developers, you know that it’s very easy to waste time. One minute you’re coding or designing, and the next, you’re watching cat videos on YouTube.
RescueTime won’t try to motivate you or fix your habits, but it will tell you the cold, hard facts about how much time you spend on Facebook instead of working.
There are times you need to clear your cache and cookies, but navigating to Chrome settings is tedious. Clear Cache lets you erase your cache as well as global or local cookies at the click of a button.
As a designer, you may wish to make your pages colorblind-friendly, especially if it involves charts, data, and other media. Color deficiencies of all kinds are common enough to be worth attention, and if someone visits a site and sees a muddle of indistinguishable colors, they’ll quickly leave.
Spectrum lets you simulate a variety of color vision deficiencies, including the most common, deuteranopia.
An Extension For Every Problem
Ready to take your design and development one step further? These extensions can help you maximize efficiency and get back to the fun part of website creation.
Just be sure not to install too many, as they can slow Chrome down and clutter up the top bar. Pick a select few that benefit your job the most, and cut down on the slow work that plagues website development.