Here are an assortment of Chrome extensions that can make design and development cleaner, more efficient, and more fun.
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.
1. Web Developer
2. CSS Peeper
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.
3. Awesome Screenshot
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.
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.
Stay on top of font trends for 2020 and use only best for you projects.
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.
8. Window Resizer
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.
10. 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.
11. Highly Highlighter
12. 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.
13. Page Ruler
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.
15. Save Data
Being a designer on limited data can be a nightmare. All those images, downloads, and extensions can really add up! Save-Data 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.
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.
17. Clear Cache
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.
Developing a website needs solid effort and consistent focus. elink‘s Chrome extension aims to make the life of developers a little easier by helping them create a better, more functional website in minutes. This extension is the fastest way to bundle links and create beautiful collections to embed on your website.
All you’ve to do is collect links around any topic, customize the content inside – such as images, title, description – and embed it on your website. You can also add new links to your published content and update it in real-time using the extension. elink is just what you need to create the website of your dreams.
A Chrome 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.