There are a ton of free Chrome extensions to help make your life easier – we select the best.

01. DomFlags

A new way to work with DevTools

Radically speed up the processes of styling elements with DomFlags, a truly great extension that lets you create keyboard shortcuts for DOM elements! It’s like having bookmarks for navigating the DOM; this will change the way you work with DevTools.

02. Highly Highlighter

Highly, a new way to participate in industry conversation

Here’s an interesting way to bring people into a discussion: Highly lets you share highlights from articles on the web, so you can draw attention to the most significant bits of writing.

03. Booom

Get a better Dribbble experience with Booom

Booom makes Dribbble better by showing larger shots in lists; putting Like and Add to Bucket buttons in lists; making GIFs autoplay and bringing infinite scroll.

04. CSS-Shack

Google Chrome extensions - 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.

05. Marmoset

Google Chrome extensions - 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.

06. iMacros for Chrome

Google Chrome extensions - IMacros
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.

07. Font Playground

Google Chrome extensions - 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.

08. Window Resizer

Google Chrome extensions - Windows 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.

09. Project Naptha

Google Chrome extensions - 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.

10. What Font

Google Chrome extensions - 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.

11. Yslow

Google Chrome extensions - 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.

12. Web Developer

Google Chrome extensions - 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.

13. Page Ruler

Google Chrome extensions - 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.

14. Web Developer checklist

Google Chrome extensions - 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.

15. DevTools Autosave

Google Chrome extensions - Dev Tools 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.

16. Instant Wireframe

Google Chrome extensions - 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.

17. ColorZilla

Google Chrome extensions - 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.

18. Ripple Emulator

Google Chrome extensions - 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.

  • WhatFont

    WhatFont View in Chrome Store The easiest way to identify fonts on web pages

    Users: 108.154 | Rate: 4.5 /5

    What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.

    It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

    To embrace the new web font era, WhatFont also detects services used for serving the font. Now supports Typekit and Google Font API.

  • ruul. Screen ruler

    ruul. Screen ruler View in Chrome Store A fantastically simple on-screen ruler for lining up and measuring type, line height, strokes and just about anything on the web.

    Users: 74.136 | Rate: 3.5 /5

    Get pixel perfect with: horizontal and vertical draggable rulers; pixel, picas and type measurements, line height guides and stroke widths. Move ruul with arrow keys, one pixel at a time, and use multiple ruul together. Ruul have 4 different coloured ruul, steel and wooden ruul included.

    “Every web designer or developer should have one”

  • Screen Capture (by Google)

    Screen Capture (by Google) View in Chrome Store Capture visible content of a tab, a region of a web page, or the whole page as a PNG image. Support horizontal and vertical scroll…

    Users: 1.676.842 | Rate: 4 /5

    It’s easy to use this extension to capture visible content of a tab, a region of a web page, or the whole page as a PNG image.

    You can also edit your captured image before saving it as a PNG image. Highlighting, redacting and adding text are supported.

    What set this extension apart are: Super fast when capturing page image, esp. for large pages; Support horizontal scroll for large pages that do not fit in one tab screen horizontally; Intelligently detect floating objects on a page and avoid repeating capture of the same floating objects if whole page capture requires scrolling; Works on Windows, Linux and Mac

  • Image Downloader

    Image Downloader View in Chrome Store See all images shown or linked on a web page and download them.

    Users: 54.665 | Rate: 4 /5

    If you need to bulk download images from a web page, with this extension you can: See images that the page contains and links to, Filter or sort them by URL; also supports wildcards and regular expressions, Optionally show only images from links, Select images for download by either using the checkboxes or directly clicking on the image, Dedicated buttons to download or open in new tab individual images, Customize display width, border size, style and color, Hide filters, buttons and notifications you don’t need

    When you press the “Download” button, all selected images are saved to the default download directory of Chrome. If you don’t have one, you will have to manually choose the save location for each image.

  • Evernote Web Clipper

    Evernote Web Clipper View in Chrome Store Save all the content you find interesting around the web in your account.

    Users: 2.592.895 | Rate: 4 /5

    From interests to research, save anything you see online—including text, links and images—into your Evernote account with a single click. With one click, clip part or all of any webpage, including text, images, and links. Collect everything that inspires you online. Have it forever, even if the original goes away.

  • RescueTime for Google Chrome™

    RescueTime for Google Chrome™ View in Chrome Store RescueTime is a personal-analytics service that helps you understand how you spend your time.

    Users: 4.822 | Rate: 4 /5

    RescueTime is a personal-analytics service that helps you understand how you spend time on your computer, smartphone and tablet. There is no manual data-entry required. The web-application works hand-in-hand with the installable client available for OS X, Windows, Linux, Android devices, and ChromeOS.

  • Pinterest for Google Chrome

    Pinterest for Google Chrome View in Chrome Web Store Discover, collect, and share inspiration

    Users: 10.155 | Rate: 4 /5

    Pinterest is a tool to find your inspiration and share it with others. Use it to collect things you love, organize and plan important projects, and more.

    The official Pinterest extension for Google Chrome adds a button to your browser that lets you pin from any website, quickly and easily

  • Web Developer

    Web Developer View in Chrome Web Store Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.

    Users: 634.663 | Rate: 4,6 /5

    Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.

    The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox.

  • Stylebot

    Stylebot View in Chrome Web Store Adapt the web’s appearance

    Users: 78.455 | Rate: 4,5 /5

    Stylebot allows you to quickly manipulate the appearance of any website (using custom CSS).

    You pick an element and choose any changes you want to make from the editor. You can change the font size, color, margins, visibility and a lot more. The advanced users can also write the CSS manually.

    Using Stylebot, you can personalize the look and feel of your favorite websites. It is also a great tool to learn CSS and for debugging your own site’s design.

  • Alexa Traffic Rank

    Alexa Traffic Rank View in Chrome Web Store The Official Alexa Traffic Rank Extension, providing Alexa Traffic Rank and site Information when clicked.

    Users: 229.128 | Rate: 4,6 /5

    Alexa Traffic Rank is Alexa Internet’s free extension for Chrome, and is the only extension that includes you in Alexa’s traffic panel. The Alexa extension accompanies you as you surf, providing you with Alexa data about the sites you visit without interrupting your browsing.

    Get quick and easy access to a site’s Alexa Traffic Rank and sites linking in. How does this site’s traffic compare to other sites on the Web?

  • Eye Dropper

    Eye Dropper View in Chrome Web Store Eye Dropper is open source extension which allows you to pick colors from web pages

    Users: 220.009 | Rate: 4 /5

    Eye Dropper is open source extension which allows you to pick colors from web pages, color picker and your personal color history.

    Eye Dropper is extension for Google Chrome and Chromium. It allows you to pick color from any webpage or from advanced color picker. It is great tool for web developers.

  • Resolution Test

    Resolution Test View in Chrome Web Store An extension for developers to test web pages in different screen resolutions

    Users: 133.036 | Rate: 4,6 /5

    An extension for developers to test web pages in different screen resolutions, with an option to define your own resolutions.

    Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size, more info on that here – http://browsersize.googlelabs.com/

  • Speed Tracer (by Google)

    Speed Tracer (by Google) View in Chrome Web Store Get insight into the performance of your web applications

    Users: 170.880 | Rate: 4 /5

    Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs.

    Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by: Javascript parsing and execution, Layout, CSS style recalculation and selector matching, DOM Event handling, Network resource loading, Timer fires, XMLHttpRequest callbacks, Painting and more.

  • Firebug Lite for Google Chrome™

    Firebug Lite for Google Chrome™ View in Chrome Web Store Firebug Lite for Google Chrome, supported by the Firebug Working Group.

    Users: 767.137 | Rate: 4 /5

    Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.

    For more detailed information, visit: http://getfirebug.com/releases/lite/chrome/

  • Corporate Ipsum

    Corporate Ipsum View in Chrome Web Store Generate random corporate double-speak for use as filler text

    Users: 170.880 | Rate: 4 /5

    A lorem ipsum generator with a corporate bent. Generates filler content by the word or paragraph.

    This is a clone (with permission) of Brian Haslanger’s Corporate Ipsum dashboard widget for Google Chrome.

    Efficiently seize integrated vortals with installed base methodologies. Synergistically orchestrate leveraged data with intuitive action items. Proactively develop tactical services and interoperable networks. Efficiently create enterprise potentialities whereas interoperable e-commerce. Globally fabricate worldwide solutions via principle-centered human capital.

    Planned additions: Copy output as HTML, Configurable number of sentences per paragraph.opy-output-as-html, and configurable number of sentences per paragraph.

  • download google  chrome offline version
Advertisements