I know that my favorite browser is Google Chrome, and I am sure that several loyal Stackers are the same. Well, we came across this great Appstorm article that lists the 10 best Google Chrome Extensions for Designers and Developers. Check it out below and be sure to follow us on Flipboard!
WhatFont
There was a time not long ago, when the choice of fonts for web design was seriously limited. With the explosion in web fonts, things have changed dramatically. Now when I visit a new site with some good looking typography, the first thing I do is hit theWhatFont extension to peek at what fonts are being used. The extension simply adds a tooltip to your mouse cursor which shows the font that is being used for the text under the cursor at any point. Click anywhere and it opens a popup with more details like the complete font stack, size, a preview of the font and where the font is being served from. Once you are done, click the “Exit WhatFont” button in the top-right to go back to regular browsing.
MeasureIt
When designing websites, you often need to check for dimensions of elements on a page, especially if you are used to relying on the rulers and guides in Photoshop.MeasureIt tries to solve that problem by letting you quickly and easily check the height and width of almost anything on a webpage simply by dragging a box around it. The measurements appear in real time as you drag the marquee across.
Responsive Inspector
When building responsive websites, checking how the layout reflows at different viewports is extremely important. Although there are a ton of websites and extensions that will let you view your designs at preset widths, Responsive Inspector takes a slightly different approach. It reads through your CSS and lists the viewports that have been set for any given page using media queries. That way, you can resize your browser or take screenshots at exactly the dimensions a page was designed for. Perfect for checking whether your media queries work as expected, or to learn how the pros set them on well designed sites.
Window Resizer
But what if you want to test your website at a variety of different device dimensions? Trying to resize the browser window to a perfect 320 x 480 pixels is not possible, right? Well, that’s where the Window Resizer plugin comes in handy. Just select a size from a list and voilà! Your window is exactly that size, ready for you to test the layout of your web page. Although it comes with a few preset sizes, the real power of the extension is in the fact that you can set your own dimensions and add to the list for easy access later.
Colorzilla
From simple, focused apps to one that does a lot. Colorzilla – one of the most popular Firefox extensions – is an all-in-one tool for things you can do with color inside a browser. From letting you pick a color from any web page, editing and selecting custom color shades, to analyzing colors used on a web page and generating complex CSS gradients, this one does it all. It also stores a list of all the colors you have picked either from web pages or from the color picker, for easy reference later on.
Palette for Chrome
Inspiration can come in many different shapes & forms, especially when it comes to colors and color palettes. If you comes across an image that seems to have that perfect look for your next design, you can use Palette for Chrome to quickly extract actual colors from the image and create a color palette. Just right-click the image and select an option from the Palette for Chrome sub-menu to create a 16, 24 or 32 color palette or a custom one where you define how many colors you want.
Stylish
As a designer, I often find myself getting irritated with how certain websites look and work. Only if there was a way to customize the look of such website, get rid of elements I don’t like or need, or maybe even add some functionality to fit my personal needs. Well, Stylish has been that way for a while now. As an extension that found its roots on Firefox, it has adapted well to Chrome and is now a first-class citizen of the Chrome ecosystem. And if you don’t like tweaking CSS and javascript yourself, you can simply go to userstyles.org and find a script that suits your needs from the thousands that others have shared.
Firebug Lite for Google Chrome
For long, the Firebug extension for Firefox was the holy grail of web designers and developers. The ability to analyze and troubleshoot a web page right from within the browser was a powerful tool to have, and kept a huge chunk of developers loyal to Firefox even as Chrome grew in popularity. Although Chrome’s developer tools have come a long way, those who miss the good old Firebug can get their share with theFirebug Lite extension for Chrome. The extension brings much of the functionality from its big brother, but with a few caveats. You cant read external resources, the javascript debugger is missing and it won’t work well on pages with frames.
SourceKit
If you spend a big chunk of your time inside the browser, here’s one more reason to stay there. SourceKit is a powerful programmer’s text editor that works like a native app from within Chrome and lets you open, edit and save documents. It can also save files directly to Dropbox, making it a great choice for those who like to have universal access to their files. With syntax highlighting and support for a long list of languages, this is surely one to try if you are into code.
Pendule
Finally, something I like to call the swiss army knife of designer and developer tools in Chrome – the Pendule extension. This is more of a toolset than an individual and lets you do everything from enabling and disabling stylesheets and images on web pages, manipulating forms, listing colors used on a page, resizing the browser window, displaying rulers, picking colors, validating code and more. If you are a web designer or developer and use Chrome as your default browser workhorse, this is one bundle of awesome functionality that you don’t want to be without.
And also check out our Awesome Deals at StackSocial!
The Name Your Own Price Learn to Code Bundle at your own price! Beat the average (currently <$15) and you get 8 awesome coding courses!
The Name Your Own Price Learn To Design 2.0 Bundle!
The Mammoth Xcode & Swift Developer Bundle for 82% off!
The Complete iOS 8 + Swift Developers Course (Pre-Order) for 92% off!
Thanks for this awesome collection of google chrome plugins – check my collection about Google Chrome plugins 2015