Tools Web Design

Designer’s Choice: Chrome Extensions to Give a Run for Your Browser

5/5 (1)

Google Chrome has proved its dignity to be the best browser. Though there are thousands of other things it has to offer its users - they are called extensions. Google gathered each and every at Extensions Webstore, feel free to visit it, if haven't seen it before. What you will find there are the small apps that will ease your web presence making it more comfortable and interesting. All extensions are grouped into dozens of categories making it easier to find the one you need.

But what are those extensions? Those are small programs that can modify and enhance functionality of Chrome browser. From a user's point of view, extensions and packaged apps are very different because they present very different user interfaces. Extensions have little to no UI. The buttons of each extension you install will be displayed to the right of the address bar.

Into this blog post we decided to include only the most essential extensions for web designers and developers. You will definitely find something useful for you among these items.

***

Live CSS Editor

Extension provides text box to any HTML page allowing you to write CSS and simultaneously see the result. The extension options allow you setting default key commands to open and close the editor; turn off the warning that is shown when you close the editor; and enable or disable the automatic saving of your changes when you close the editor.

***

Speed Tracer

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. Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by:

  • Javascript parsing and execution
  • Layout
  • CSS style recalculation and selector matching
  • DOM Event handling
  • Network resource loading
  • Timer fires
  • XMLHttpRequest callbacks
  • Painting

***

Web Developer

Web Developer extension adds toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox.

***

Palette for Chrome

Do you want to create a color palette that matches an image from your website? Just right click on the desired image, select the 'Palette for Chrome' option, and choose the number of colors you want the palette to have. A new tab will open, displaying the image and the resulting color palette. It's that easy!

***

Ripple - Mobile Environment Emulator

Ripple is a multi-platform mobile environment emulator that is custom-tailored to mobile HTML5 application development and testing. Ripple aims to reduce the challenges being faced by mobile developers caused by today's platform fragmentation in the marketplace. Ripple is targeted towards WebWorks, PhoneGap, and mobile web development and testing!

***

appMobi HTML5 XDK

The XDK is the world’s first HTML5 powered mobile application development tool. With it, you can create, debug and build customized, robust HTML5 apps in hours. appMobi's cloud-based build system turns your HTML5-based apps into 100% native API-compliant mobile apps for iOS or Android, or you can deploy them as webapps or Chrome apps. All from a single code base!

***

Chrome Daltonize

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

***

Overlay "960.gs"

Overlay "960.gs" guides over a webpage that uses the 960 Grid System. Sites that use the "960 Grid System" are automatically detected; click the "960" icon in the address bar to overlay a grid over your webpage.

***

Eye Dropper

Eye Dropper is open source extension which allows you to pick colors from web pages, color picker and your personal color history. 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.

***

Google Fonts

This extension provides you a preview of Google's web fonts on current web page.

***

Resolution Test

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

***

WordPress Stats

WordPress Stats for chrome provides you the referrers, top posts, search term and clicks of your blog without the need to login your blog dashboard.

***

Web Developer Joomla

Expansion is aimed at facilitating the daily work primarily with the CMS Joomla! As well as any other CMS systems. There are options to select image alt, resize windows, reboot, css, and many other useful features.

***

Drupal Feeds

Pull feeds and news from Drupal, Drupal Planet, Drupal Association to your beloved browser; Chrome, and enjoy news with draggable tabs. Integrated with "Read it Later" Load more feeds.

***

Chrome Sniffer

This extension will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework. Version detecting is being implemented.

Currently, this extension can detect more than 100 popular CMS and javascript libraries, and more will be added in future releases. Visit extension website for more detail.

***

jQuery API Browser

Simple extension for jQuery developers that allows quickly search through API documentation. Displays short method description, list of available parameters, and provides a direct link to this method on jQuery site. All alternate signatures for the current method are also shown.

***

Black Menu

Quickly search almost everything google is capable of - get easy access to the most commonly used google services, available at any time including Mail, Google+, Calendar, Web, Translate, etc.

***

If you're using some other cool extensions feel free to share them in the comments.

6 Responses

  1. Wow appMobi HTML5 XDK looks pretty nifty, I must check it out.

    Thanks Alex.

  2. This is a fabulous post. Thank you for sharing the list of extensions–I’ve downloaded many of them.

  3. This website can be a walk-through for all of the info you wanted about
    this and didn’t know who to ask. Glimpse right here, and you’ll
    positively discover it.

  4. @4ea2c2ca57a21a2870c98c8b3f428645:disqus @a1da3173dc7c8f2e3e43fdc945b3a15c:disqus @1d671310a051edaa12ae1ab9bf36a5f3:disqus @6a4d902124b46806236c4894192abcf6:disqus, you’re welcome guys! Stay in touch and don’t forget to share the post with your friends:)

Leave a Reply

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