Useful extensions for Developers and Designers

August 2nd, 2016

Google Chrome is one of the best browsers available online and has been the dominant browser on the internet since November 2011 when it overtook Firefox. Today I would like to share with you a few of the most useful Google Chrome extensions to help you to improve your productivity.

  • Devtools Terminal — Terminal in your browser. Wicked!
  • LiveReload — Provides Chrome browser integration for the official LiveReload apps (Mac & Windows) and third-parties like guard-livereload and yeoman.
  • BrowserStack Local — The local testing app lets you instantly configure and test local/internal servers, as well as local folders containing HTML, CSS and JavaScript files. Test your layouts, workflows and interactivity across 700+ real desktop and mobile browsers in a secure cloud setup on BrowserStack.
  • JSONView — Validate and view JSON documents.
  • Postman — Supercharge your API workflow with Postman! Build, test, and document your APIs faster. More than a million developers already do…
  • Window Resizer — This extension re-sizes the browser’s window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.
  • WhatFont — The easiest way to identify fonts on web pages.
  • Page Ruler — Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.
  • Web Developer Checklist — For web developers who wants to make sure they follow best practices. This extension allows you to very easily discover problem areas in your website.
  • Image Downloader — Browse and download images on a web page.
  • Alexa Traffic Rank — 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.
  • Eye Dropper — Eye Dropper is open source extension which allows you to pick colors from web pages, color picker and your personal color history.
  • Firebug Lite — 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.
  • Web Developer — Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.
  • Responsive Inspector — Responsive Inspector is a simple Google Chrome extension that allows viewing media queries of visited websites. It is very useful when developing responsive web layouts as it can visually show what resolutions are defined in css stylesheets.
  • BuiltWith — Find out what the website you are visiting is built with using this extension.
  • Corporate Ipsum — Generate random corporate double-speak for use as filler text.
  • User-Agent Switcher — Spoofs & Mimics User-Agent strings. With this extension, you can quickly and easily switch between user-agent strings. Also, you can set up specific URLs that you want to spoof every time.
  • YSlow — YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page.
  • CSS Shapes Editor — Create and adjust CSS Shapes values with an interactive editor overlapping the selected element.
  • Pesticide — This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page.
  • Responsive Web Design Tester — Test your mobile site on mobile devices.
    This extension reflects both the size and the browser of the mobile device.
  • Palettab — Bringing awesome colors and fonts to the new tab page! A little bit of something fresh every time you hit that new tab button.
  • jQuery Audit — jQuery Audit creates a sidebar in the Elements panel containing jQuery delegated events, internal data, and more, as live DOM nodes, functions, and objects.
  • Font Changer — Change the font on Facebook, Twitter, Google, Youtube or any other site. Test Google Web Fonts™.
  • HTML5 Outliner — Generates a navigable page outline with heading and sectioning elements.
  • PerfectPixel — This extension allows developers to put a semi-transparent image overlay over the top of the developed HTML and perform per pixel comparison between them.
  • SelectorGadget — Selector Gadget is an open source Chrome Extension that makes CSS selector generation and discovery on complicated sites a breeze.
  • Stylebot — Change the appearance of websites instantly.