In this post i have compiled some best Google Chrome extensions to speed up your front-end development workflow, i hope you find them useful.
CSS Shapes Editor for Chrome
The extension adds a new sidebar to the DevTools Elements panel called “Shapes”. It offers controls to create and edit CSS Shapes values like polygon(), circle() and ellipse() on the selected element.
Pesticide
This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page.
Emmet LiveStyle
This plugin takes a completely different approach on updating CSS. Unlike other live editors, it doesn’t simply replace a whole CSS file in a browser or an editor, but rather maps changes from one CSS file to the other.
Muzli
The freshest links about design, UI, UX & interactive from around the web. All the design inspiration you need.
Dimensions Toolkit
A super friendly Chrome Extension for designers to test responsive websites.
Responsive Web Design Tester
Responsive Web Design Tester is a quick and easy way to test your responsive website.
Palettab
Palletab is a Chrome extension which uses Google fonts and amazing ColourLovers palettes to inspire you with fresh and clean inspiration every time you hit that new tab button!
Fontface Ninja
Fontface Ninja is a new plugin you can install in your browser to recognize, try and download any font on the Internet!
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.
Stylebot
Stylebot lets you manipulate the appearance of any website with custom CSS. You pick an element and choose any changes you want to make from the editor. You can change the font, color, margins, visibility and a lot more. You can also write CSS manually.
SelectorGadget
Selector Gadget is an open source Chrome Extension that makes CSS selector generation and discovery on complicated sites a breeze.
Eye Dropper
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.
LiveReload
How many times on average do you hit the refresh key on your keyboard every day?
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.
Yet Another Lorem Ipsum Generator
Directly inserts blind text into text fields on websites or copies blind text to the clipboard for other use. Choose the type and amount of text in an interactive, visual way.
HTML5 Outliner
This extension is using the HTML5 outline algorithm to create a table of contents. Should also work well with HTML4 (and older?) pages, that have structured headings. The table of contents is clickable and tries to highlight the heading/section in question after the jump.
Font Changer with Google Web Fonts
Uses Google Web Fonts for a great selection. You can set a font for all sites, or just specific sites.
Page Ruler
Page Ruler lets your draw out a ruler to any page and displays the width, height and position of it.
