chrome-extensions-design-webdev-slide

Chrome Extensions for Web Design and Development

UPD: The list is now forkable on github.

Originally I’ve posted an article called “Chrome Extensions I can’t live without” a few months ago. Later on I kept updating it with more and more extensions that I found useful – mainly in the “webdev and design” category. Today I’m extending it again and moving this list to a separate article for flexibility and convenience. Here is the list of design/webdev only extensions that I use in the work process.

Testing

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

Live reload
LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

IE Tab
Don’t give up that native IE Web functionality just because you’re using Chrome. The IE Tab Chrome Extension creates a virtual IE browser within Chrome, so you get all the Internet Explorer-ness without running two different browsers.

Clear Cache
Clear browser cache with one click.

Validity
Click the icon in the address bar or press Ctrl+Alt+V to validate the current page. Results can be seen in Chrome’s JS console.

RegExp Tester App
Create and test regular expressions.

HTML5 Outliner
Generates a navigable page outline with heading and sectioning elements.

Pendule
Pendule complements the built-in developer tools of Chrome and makes website edits easy, such as viewing CSS, disabling styles, reloading CSS (without having to reload the entire webpage), viewing JavaScript and much more.

Performance

YSlow
Make your pages faster with Yahoo!’s page performance tool.

Speed Tracer (by Google)
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.

SEO

SEO SERP
A simple tool to quickly check the position of a list of sites given a keyword.

SEO for Chrome
SEO for Chrome provides SEO Stats and Tools that make your daily SEO tasks easier.

SEO Site Tools
Pulls metrics from various sources, including social media reactions, and enhances common tools like Yahoo Site Explorer and Google Webmaster tools with links anchor text and pagerank.

Alexa Traffic Rank
The Official Alexa Traffic Rank Extension, providing Alexa Traffic Rank and site Information when clicked.

META SEO inspector
Useful to inspect the meta data found inside web pages, usually not visible while browsing.

SEO & Website Analysis
SEO report is an extension for Google Chrome™ done by WooRank , this SEO plugin provides a very deep SEO report for any given website.

PageRank Status
Shows Google PageRank and AlexaRank of current web page, quick access to Geo IP Location, Whois, Alexa, backlinks and indexed pages.

Layout

MeasureIt!
Draw out a ruler that will help you get the pixel width and height of any elements on a webpage, lookup the alignment and exact pixel width and height dimensions of any selected element on a webpage.

Tape
Measurement tools, rulers and grids.

Images

View Image Info (properties)
Get properties(including dimensions, URL, file size, file type info) of the image your cursor is pointing to via context menu.

Image Properties Context Menu
A simple context menu extension to show the properties of an image.

Image Cropper
Image Cropper lets you crop images in any website on the fly.

Pixlr Editor Full featured in browser photo editor!
Featured photo editor direct in the browser. Some of the tools included are: red eye reduction, spot heal tool, drawing tools, clone tools, sharpen and blur tools and many more.

Color Tools

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

ColorZilla
Includes a color picker, eye dropper and gradient generator, along with additional advanced color tools. You can get a color reading from any point in the browser (and save these colors in custom palettes), make edits on the fly and paste the output (in CSS, Hex, RGB and more) into other apps.

Palette for Chrome
Creates a color palette from any image. Just right-click on the image and select the ‘Palette for Chrome’ option.

Chrome Daltonize
Daltonization is a technique of exposing details to color-blind users, allowing them see what they otherwise would have missed.

Lorem Ipsum

Lorem Ipsum Generator
Creates random dummy text.

Corporate Ipsum
Proactively brand mission-critical metrics for future-proof interfaces. Continually transition client-centered expertise through technically sound value. Intrinsicly myocardinate progressive models without integrated technologies. Intrinsicly strategize alternative.

Yet Another Lorem Ipsum Generator Versatile Lorem Ipsum Generator that inserts various types of blind text directly into websites or copies it to the clipboard.

Source Code

What Font?
The easiest way to identify fonts on web pages.
WhatFont identifies all the fonts used on a webpage and gives in-depth details, such as the font family, font size, along with the color, weight and line height (you can even tweet this information). Apart from native web safe fonts, it detects the services used for serving the font and supports Typekit and Google Web Fonts.

All JS Viewer
The All JS Viewer extension adds a browser action button to the browser. Click the button, inline and external source JavaScript from a page including all frames inside it, will be displayed in a new tab.

SourceKit
A Textmate like lightweight programmer’s text editor right inside of Chrome. Saves files directly to Dropbox, so if you have the Dropbox sync software installed, the changes will appear locally as if you did so with a text editor.

Chrome Sniffer
This extension will help web developer to inspect web framework/CMS and JS library running on current browsing website. Currently, this extension can detect more than 100 popular frameworks, CMS and libraries.

BuiltWith Technology Profiler
Find out what the website you are visiting is built with using this extension. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves.

JSView
This extension displays included JS and CSS files in the context menu.
By clicking on a file, it opens in a new tab.

JSONView
Friendlier JSON viewer.

Clockwork
Chrome extension for PHP development, extending Developer Tools with a new panel providing all kinds of information useful for debugging and profiling your PHP scripts, including information on request, headers, GET and POST data, cookies, session data, database queries, routes, visualisation of application runtime and more. Clockwork includes out of the box support for Laravel 4 and Slim 2 based applications, you can add support for any other or custom framework via an extensible API.

To use this extension you need to install a server-side component available via packagist.

CSScan
Offers a quick overview of CSS properties to the element the mouse cursor is hovering.

CSSViewer
CSSViewer shows the css parameters of any element in a web page, to enable/disable it simply click the toolbar icon and then hover any element on you want to inspect in the page.

XML Tree
Displays XML data in a user friendly way.

Other

OAuth 2.0 Playground
A tool for developers that simplifies experimentation with the OAuth 2.0 protocol and APIs.

Cookies
A powerful and easy-to-use Cookie Editor.

Edit This Cookie
Edit This Cookie is a cookie manager. You can add, delete, edit, search, protect and block cookies!

4 replies
  1. Simon
    Simon says:

    Great post and some very handy extensions here I’ve not seen before. I also use MeTask – it’s a great little extension I use for tracking the time I spend on various project tasks for my clients. http://www.metask.com

    Reply
  2. creative agency manchester
    creative agency manchester says:

    Great post and a few terribly handy extensions here I’ve not seen before. I conjointly use Me Task – it’s an excellent very little extension i exploit for following the time I pay on numerous project tasks for my purchasers.

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *