extensions for designers and devs

01. CSS-Shack

This Chrome extension lets you create layers styles and export them into a CSS file

This powerful Chrome extension allows you to create designs then export them into a CSS file for use on your site. It supports layers and contains a plethora of the tools that you're used to from your regular photo editor.

02. Marmoset

With Marmoset you can create gorgeous code snapshots within seconds

This brilliant extension will take your code and output snapshots for your demos and mockups. You can also add themes and effects to create images for promo and your online portfolio.

03. iMacros for Chrome

iMacros Chrome extension lets you record actions and save them

As a web developer, you may be required to test your web pages. Repeating the same actions over and over again can be a tiresome process. iMacros is a handy Chrome extension which lets you record your actions and save them so you only need to do them once. After that you can test your pages over and over again repeating the action with a click of a button, saving valuable time and letting you concentrate on more pressing matters.

04. Font Playground

Font Playground lets you experiment with local fonts on a live web page

Every designer and developer out there will find this extension invaluable. Font Playground lets you experiment with the local fonts and the entire library of Google fonts on a live webpage without making any actual changes. The beauty of this extension is that it includes all the different font weights, styles and text effects so that you can visualise your webpage before you implement the changes.

05. Window Resizer

This Chrome extension re-sizes the browser window in order to emulate various resolutions

This Chrome extension is a very useful tool that does exactly as it says on the tin – resizes your browser window to help you with your responsive website designs. Choose from a list of popular monitor dimensions or add custom sizes and resolutions for increased accuracy.

06. Project Naptha

With Naptha you can highlight, copy, edit, and translate text from any image on the web

If you ever find yourself working from a mockup image with embedded text, Project Naptha could save you a world of mild irritation. Thanks to some smart OCR trickery it enables you to highlight, copy and paste text from any image; it can even translate it for you too.

07. What Font

What font are they using? The What Font Chrome extension can tell you!

A very useful Google Chrome extension, What Font allows developers and designers to identify the fonts being used on a web page. So, if you stumble upon a fancy-looking web font that you want to use in one of your future projects, just hover over it and find out instantly which font it is.

08. Yslow

YSlow tells you what's slowing your page down

This tool doesn't just check how quickly your web page loads, it also tells you what, if anything, is slowing it down. Yslow tests your webpage against 23 of the 34 rules identified by Yahoo's performance team. It's an extremely useful tool to analyse web pages and it also suggests ways to improve their performance.

09. Web Developer

The Web Developer Chrome extension provides a range of useful dev tools

As a web developer, you might ask yourself how you have lived without this extension. It adds a toolbar button to Chrome with a plethora of useful web developer tools. It's the official port of the Web Developer extension for Firefox.

10. Page Ruler

Draw a ruler to get pixel dimensions and positioning with Page Ruler

Page Ruler is a great tool for precisely measuring the elements on any web page, then manipulating it for your benefit. Draw a ruler to get pixel dimensions and positioning.

11. Web Developer checklist

Fix issues quickly with this handy Chrome extension

This tool allows you check all if your web pages are following best practice when it comes to SEO, usability, accessibility and performance (page speed). So, if, for example, you don't have an H1 tag on a web page or if a web page is missing its meta title or meta description, it will notify you so you can fix the issue quickly. If you click the 'more info and help' link at the bottom of the extension you will find a more in-depth checklist.

12. DevTools Autosave

Automatically save any changes to a page's CSS and JS to its source file

A true gem for all web developers out there, DevTools AutoSave allows you to automatically save any changes that you make to a webpage's CSS and JS via the Chrome Dev Tools environment to its source file. It's easy to set up and use and it will save you lots of time.

13. Instant Wireframe

View live web pages with a wireframe overlay

Turn any web page into a wireframe with just one click. This Google Chrome extension helps web developers and designers view web pages, whether local or live on the web, with a wireframe overlay.

14. ColorZilla

With ColorZilla you can get a color reading from any point in your browser

The ColorZilla Chrome extension is an advanced eyedropper, colour picker, gradient generator and more useful colour tools that will help you in your design – right there in your browser window.

15. Ripple Emulator

Ripple Emulator offers debugging, DOM inspection and automated testing

Ripple Emulator is a multi-platform mobile environment emulator that can help you test your web app using a number of different devices and screen resolutions. Ripple can be used in conjunction with existing development tools to perform debugging, DOM inspection and automated testing.

16. Streak

Turn an email conversation into a trackable, assignable ticket

Streak is the ultimate tool for managing CRM and support emails within Gmail. It allows you to turn a single email or an entire conversation into a trackable, assignable, organised ticket that you can manage yourself or share with others.

17. Search Stackoverflow

Get your questions answered quickly with this must-have extension

If you're a web developer then you've probably heard about Stack Overflow, the go to place for any development related issues. If not, then you definitely need to check it out, the community is thriving and it covers a wide range of topics from C# and Java to PHP and jQuery. This fantastic extension adds a search box directly into your browser allowing you to search the vast resources of Stack Overflow. A must-have extension!

18. PHP Ninja Manual

All the PHP 5.5 documentation you need without leaving the browser

It can be difficult to remember every function, so, if you've been wasting hours searching for specific PHP functions on Google, this extension is bound to attract your attention. The PHP Ninja Manual provides you with all the PHP 5.5 documentation with examples in eight languages without having to leave your browser.

19. PerfectPixel

This extension helps you ensure your site matches the design pixel for pixel

Designers hate it when they create a stunning design for it not to match up perfectly when it's coded. Perfect Pixel really is the perfect extension for web developers who are striving to develop sites that are accurate representations of designs. This easy to use extension allows you to put a semi-transparent image overlay over the top of your webpage and perform a per pixel comparison between them to ensure it is 100% accuracy.

20. Code Cola

Edit your web pages' CSS on the spot

Not only does this tool allow you to view the source code of what you've been working on, but it also functions as a CSS editor which means you can edit your web pages' CSS style on the spot and see the changes instantly.

21. Chrome Sniffer

Inspect and detect web applications and JavaScript libraries

This extension helps web developer inspect and detect web applications and JavaScript libraries running on the site. It couldn't be simpler to use: an icon will appear within the address bar indicating the framework and CMS version used.

22. User Agent Switcher

See how your site looks using different devices

A great tool for seeing how a site looks using different user agents such as an iPad, iPhone or an Android device. This can be extremely useful if a site has been hacked as you can view pages the way search engines see them.

23. IE tab

Test web pages with different versions of IE

One of the most popular and useful IE emulators available on the web. This allows web developers to test web pages with different versions of IE directly in their Chrome browser.

24. PicMonkey

Grab every image from a web page with a click of a button

This is an easy-to-use free online photo editor that allows you to edit web page images and screenshots. But that's not what makes it so good. PicMonkey lets you grab every image and a screenshot of the entire page with a click of a button. Once you select the image you can edit it however you wish to from applying effects to changing exposure.

25. Chrome Daltonize

Create images more suitable for viewing by those with Colour Vision Deficiency

Colour Vision Deficiency (CVD) or colour blindness affects millions of people across the globe. This ingenious extension uses daltonization, a technique that allows the creation of images more suitable for viewing by those with CVD. This fantastic extension can be used to simulate how images appear to people with CVD and to help you design a more accessible web app. A great resource to help you design for people with CVD can be found here.

26. Appspector

Detect web applications and javascript libraries run on browsing website

This extension will help web developer to inspect web framework/CMS and JavaScript library running on the website you are currently browsing. An icon will appear on address bar indicates the detected framework. This highly-rated Chrome extension can detect more than 100 popular CMS and JS libraries.

27. Check My Links

Check My Links crawls through your webpage and looks for broken links

Finished building a site? Ah, but have you been through and checked all the links? No matter how careful you are, it's inevitable that you'll have overlooked one or two, and checking them all is a tedious chore. Unless! With the Check My Links extension you can simply put it to work and it'll comb through all the links on any page, highlighting valid ones in green and broken ones in red.

28. Flickr Tab

Smarten up your Chome tabs with beautiful Flickr images.

Are you tired of your Chrome tabs looking dull when you open a new one? The answer to your prayers has arrived in the form of Flickr Tab.

It's a simple little Extension that displays a popular Fickr photograph each time you open up a window. Click the photo to view it in Flickr, or click the user name to see more photos from the photographer.

29. Google Art Project

Make each new Chrome tab an adventure in art and discovery with the Google Art Project.

If Flickr Tab and all its glossy images aren't your thing then maybe Google's Art Project extension might be more of your thing.

In every new tab you'll be treated to a hi-res masterpiece from the likes of Van Gogh and Monet. If the images sparks your interest click on it and you'll be taken to the Google Cultural Institute website which is full of information about the work and its creator.

30. Data Saver (Beta)

Save cash when viewing designs on your mobile with Google's compression based Data Saver.

So, your latest bill from your mobile provider was rather toe curling? Don't panic. You need Data Saver, from Google. The extension does what it says on the tin: it reduces the amount of data used when browsing the web. When enabled, Chrome will use Google servers to compress pages before you download them. There's only one caveat: SSL and incognito pages won't be included.

Rahul Mistry and Creative Bloq staff

SHARE THIS