Chrome Extensions for Web Designers

There are quite literally hundreds of Chrome extensions available for web designers, all of them offering time-saving solutions to many of the design and development issues that will often crop up.

So with all these extensions available, how do you choose the one, or the collection, that will help you the most?

To help narrow things down for you, in this post I’ve selected some of the extensions that I regularly do use and deem essential, like PHP Console and PageSpeed Insights, and also chosen a few that that perhaps I should start to implement into my workflow, like Dimensions and jQuery Audit, and finally I’ve also added in a bunch of new extensions that I feel are well worth your attention, like 45to75, Sourcegraph and Fontface Ninja.

DomFlags

DomFlags is a DevTools extension that allows you create keyboard shortcuts/bookmarks to DOM elements so that inspecting can be achieved much quicker.

Dimensions

Dimensions is an open-source extension for measuring screen dimensions. It’s a handy tool for when you’ve been given a new graphical UI mockup; just open it in Chrome, activate Dimensions and start measuring.

45to75

45to75 is a simple character counter for optimizing line-length between 45 and 75 characters, thus ensuring that text line lengths meet their standards.

Minimalist Markdown Editor

The Minimalist Markdown Editor app is perhaps the ‘simplest and slickest’ Markdown editor currently available for Chrome. It allows you to view the markup as you type and also features a one-click HTML conversion tool.

Corporate Ipsum

Yes, there are a multitude of lorem ipsum generators available, but what makes Corporate Ipsum different is that it generates random corporate-jargon as filler text. Here’s an example: ‘holisticly aggregate goal-oriented networks and future-proof applications’. Can’t get more corporate than that.

Window Resizer

Yes, there are many Chrome extensions available that allow you to test your responsive designs at different resolutions, this one just happens to be my favorite. Window Resizer does exactly what you would expect, it re-sizes the browser’s window in order to emulate various resolutions.

Octotree

Octotree is an extension that allows you to display GitHub code in ‘easy-to-navigate’ tree format, just like IDEs.

Sourcegraph

Sourcegraph allows you to browse Github code just as though you where using an IDE. It adds instant documentation and type tooltips to the code view on GitHub, and it also makes every identifer a jump-to-definition link.

jQuery Audit

jQuery Audit is a Developer Tools extension for easily auditing jQuery.

Chrome Logger

Formerly known as ChromePHP, Chrome Logger is an extension for debugging server side applications in Chrome.

PHP Console

PHP Console is an extension that allows you to handle PHP errors & exceptions, dump variables and also remotely execute PHP code.

PageEdit

The PageEdit extension alllows you to quickly edit the markup of any page by transforming Chrome into a function-rich WYSIWYG HTML editor.

LivePage

The LivePage extension reloads your webpage’s resources as they are changed on the server, so that you are always viewing the latest version of the web page.

ModHeader

ModHeader is an extension that can add and modify the HTTP request headers sent to web servers.

fb-flo

Created by the developers from Facebook, fb-flo allows you edit or test running web apps without ever having to reload the page.

EnjoyCSS

The EnjoyCSS extension allows you to access all of the handy CSS3 tools from the EnjoyCSS website all within the comfort of an extension. You can create ‪2D‬ & ‪3D‬ transforms, multiple complex ‪transitions‬, multiple linear and radial ‪‎gradients‬, text shadows and everythin else you can think of.

CSS Shapes Editor

CSS Shapes Editor is an extension that offers controls for creating and editing CSS Shape values via an interactive editor that overlaps the selected element.

Live CSS Editor

Live CSS Editor is an extension that allows you to freely write CSS rules on any site and instantly see the results. There are many extensions that offer this kind of functionality, but what makes Live CSS Editor different is that it remembers your CSS edits whenever you reload the page.

SnappySnippet

SnappySnippet is a fantastic DevTools extension that will grab the CSS & HTML from any selected element and with just one click will send the code to either CodePen, jsFiddle or JS Bin for further editing/testing.

Gradient Inspector

Gradient Inspector is a new extension from Rafael Carício that adds a sidebar to Chrome’s Developer Tools that will show information about the gradients that are applied to the inspected element.

Fontface Ninja

Fontface Ninja is an interesting extension that not only allows you to discover what fonts are actually being used on a website, but also allows you to download them as well. The developers of this extension implore you to not abuse it’s functionality.

Type Sample

Type Sample is a tool for identifying and testing the webfonts from any page. You can edit the size, create your own text and also save your work. There’s also a bookmarlet available.

WhatFont

There are many ways for discovering what particular font is being used on a website, but this extension is perhaps the simplest method. With What Font all you have to do is hover over text and the extension will let you know the fonts name.

Google Font Previewer

Google Font Previewer is a handy extension that allows you to access the Google Font API directory and choose a font, and then either apply it to the entire page or a specified CSS selector.

PageSpeed Insights

This is the official extension for Google’s PageSpeed Insights app. It allows you to evaluate the performance of your web pages and offers suggestions on how to improve them. To learn more about PageSpeed Insights you should have a look at this post.

Also Worth Mentioning

Validity – Quickly validate your HTML docs.

Awesome Screenshot – A popular Screen capture extension that also supports annotations.

Flat Colors Guide – An extension for quick access to flat color schemes.

Web Developer Checklist – An essential checklist for launching a new site.

IE Tab – A handy emulator for testing pages in IE drectly within Chrome.

Instant Wireframe – An extension that allows you to view any web page as a wireframe.

And finally… Website Destroyer

We all have bad days. And when those bad days come along sometimes you might need something that will help release the frustration and anger that’s being building. You need the Website Destroyer extension. It allows you to pulverize any web site using a huge arsenal of weapons with unlimited ammunition. Unlimited ammunition! I found the atom bomb extremely satisfying.

Concluding

As I mentioned previously, there are hundreds of Chrome extensions available that will help your web design and development work flow, and I’m pretty confident that I have missed a few that you guys will probably deem essential. I would love to hear about them in the comments below.

The post Chrome Extensions for Web Designers appeared first on Market Blog.

The post Chrome Extensions for Web Designers appeared first on DICKLEUNG DESIGN 2014.