18 Chrome Extensions To Speed Up Front-end Development Workflow

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.

css-shape-editor-1

Pesticide

This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page.

Pesticide-2

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.

emmetlivestyle-3

Muzli

The freshest links about design, UI, UX & interactive from around the web. All the design inspiration you need.

muzli

Dimensions Toolkit

A super friendly Chrome Extension for designers to test responsive websites.

emmetlivestyle-3

interface-4

Responsive Web Design Tester

Responsive Web Design Tester is a quick and easy way to test your responsive website.

responsive-5

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!

palettetab

Fontface Ninja

Fontface Ninja is a new plugin you can install in your browser to recognize, try and download any font on the Internet!

fontninja-6

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.

jquery-audit-7

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.

stylebot-8

SelectorGadget

Selector Gadget is an open source Chrome Extension that makes CSS selector generation and discovery on complicated sites a breeze.

selector-gadget-9

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.

eyedropper-10

LiveReload

How many times on average do you hit the refresh key on your keyboard every day?

livereaload-16

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.

pixelperfect-11

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.

loren-ipsum-12

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.

html5-outliner-13

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.

font-changer-14

Page Ruler

Page Ruler lets your draw out a ruler to any page and displays the width, height and position of it.

page-rule-15

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.