25 Google Chrome Extension For Web Developer and Designer

Firefox is really good web development tool for both web developer and designer for many years. However, it is getting slower and utilize a lot of resources which can be as much as 2GB on my laptop which really doesn't seems to justify. The best alternative i am looking at? Chrome. (DEFINITELY NOT IE ! RAGE!) Here are 25 Google Chrome extension that every web developer and designer will definitely be interested to have.

WhatFont

What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.

It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

Even web developers and designers will shout "YEAH!" with this extension.

Pretty Beautiful Javascript


Automatically makes Javascript files you come across on the net look great! Combines both Beautifier (http://jsbeautifier.org/) and Prettify (http://code.google.com/p/google-code-prettify/) to unpack/unobfuscate, format, and add syntax highlighting. No need for copy/pasting or anything else it all happens on the fly for your convenience.

PHP Ninja Manual

With PHP Ninja Manual you can search easily and very quickly in PHP 5.3 documentation in 7 languages. Speed is everything we want in web development.

CoNetServ (Complex Network Services)

Extension that integrates network tools into the browser. I find it pretty useful for both network and web developer to know their server well.

jQuery API Browser

Simple extension for jQuery developers that allows quickly search through API documentation. Web developers and designers who uses jQuery surely find this valuable.

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.

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. One of the most interesting thing a web developer will want to know.

Edit This Cookie


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

IE Tab (Windows)


It exactly emulates IE by using the IE rendering engine directly within Chrome. This will enable you to use ActiveX controls and test your web pages with different versions of IE (IE6, IE7, IE8, or IE9). Any web developers and web designers will definitely want a Chrome plugin that can assist you will cross browser issues.

Awesome Screenshot: Capture & Annotate

Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click. One of the easiest and most powerful screen capture apps on Chrome. For both web developer and designe will definitely want this on your Chrome so that you can explain to your client more clearly on what are you referring on the site. Picture speaks a thousand words.

Firebug Lite for Google Chrome


Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.

However, for web developer who is using this you might face problems as not all features are available on a lite version. Here are some of it which you might want to take note of.

  • Cannot read external resources
  • Won't work well on pages with frames
  • JavaScript debugger isn't available
  • Net Panel isn't available

Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox written by the same person and best of all, we will be enjoying it on Chrome!

speedtest.net

Sometimes things doesn't go well and you will start wondering whether its your internet connection issue. Test it on your Chrome straight away!

Resolution Test


Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size. Something web developers and designers won't want to miss.

Pendule


Pendule extended web developer tools for Chrome. It gives you more features for both web developer and designers could ever think of. Something similar to web developer tool above but built within Chrome developer tool.

Lorem Ipsum Generator


Both web developer and designer will appreciate this Chrome extension whenever they want to test a particular form or just throw some text into a design.

Click&Clean (Windows)


For windows user, you are in luck. Click & Clean is something you want to have on your list, especially web developers. Just think of all the clearing of cache makes me headache but that's not all this Chrome extension do.

  • Scan your PC for Malware
  • Delete your browsing history,
  • Remove download history,
  • Erase temporary files,
  • Clear cookies and Empty cache,
  • Delete client-side Web SQL Databases
  • Remove Flash Cookies (LSOs)
  • Protect your privacy by cleaning up all traces of your internet activity,
  • Clean up your hard drives and Free up more disk space, icluding secure file deletion using external applications, like CCleaner or Wise Disk Cleaner.
  • Watch flash videos offline, without being connected to the Internet!

Web Edit


Just press F12 on any http:// webpage, and edit text and delete things like photos, and embed elements. You can even delete a YouTube video off a page! Once you've had your fun, just press F2 to turn off edit mode, for a convincing looking defaced webpage. Web designers will definitely find this useful infront of your client.

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.

YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page. bla bla bla.. i bet most web developers know more than i do.

IP Address and Domain Information


Web developers and designers often have to assist their client with domain stuff. Whois.is is probably somewhere we always visit. Before even going to google, this might just tells us more about our client before approaching them.

Session Buddy


Web developers will find this pretty handle. Session Buddy is a flexible session management extension that allows you to easily save, edit, and restore your browser sessions.

SEO SERP


A simple tool to quickly check the position of a list of sites given a keyword.
For example, on the sample image you can see Wikipedia ranking #1 and Amazon ranking #18 for the keyword "lcd".

SEO SERP Workbench


A tool to quickly check the position of multiple sites (yours and your competitors) given a keyword. Many countries are supported. Web developers like me will definitely welcome such extension on my Chrome.

HTML5 Pointers!


A HTML5 Collection resources for those of you who wish to know more about html5 and wanted to try out the power of html5.

JavaScript Framework Selector Benchmark Tool

Many front-end developers nowadays are all using javascript framework such as jQuery, Dojo, MooTools, Prototype, etc. Most of us will be wondering which framework is more efficient than the other. Mootools brings us a great tool called Slickspeed to benchmark different framework selector performances against each other. You can even download the source code and test it on your own local drive or server. However, i notice that the result was outdated and a new test should be performed. Ever since jQuery new 'Sizzle' selector engine was released on its version 1.3, many people has been asking how much of a performance it has gain. Furthermore, Resig has been inviting other JavaScript frameworks to implementing Sizzle in its codebase and i was left wondering who did implement Sizzle in its codebase. Out of curiosity, i decided to find out.

Looking at how JavaScript frameworks change as time goes, i think it will be good to have a more dynamic benchmark tool. Therefore, using Slickspeed, i modify the source a little to bring you a more dynamic Slickspeed to benchmark your curiosity.

The tool is fairly easy to use. It is exactly the same as Slickspeed with the additional function of 'add' and 'remove' to benchmark future frameworks. The criteria is simple,

  • 'Add' will required the three textbox to be filled
  • 'Remove' will only required the name to be filled.
  • No name should be the same
  • All path can be take from Google Ajax Framework CDN
  • Function is the symbol used for the framework.

Currently, additional selectors can't be added at the moment but might be in the future so that we can perform benchmark on real selector situation with real document. Below is the updated program but the page must be fully loaded before it is ready to use.

You can also access the full screen version of JavaScript framework selector benchmark tool.

Safari plugin for your web development need

Safari has been Mac user favourite browser when it comes to surfing the world wide web.  However, web development using Safari may still seems a bit troublesome compare to Mozilla Firefox. But things is starting to change. Safari users are starting to develop their own unique Safari plugin to share with other developers around the world. Web development on Safari may change slowly when more Safari plugin is being developed, here are some of Safari plugin that developers used on web development.

Safari Tidy

safari-tidy

Safari Tidy is plugin that lets you validate the webpages you browse for (x)html compliance. It is a validator that will show three status on Safari, warning, error, ok in a small icon on the lower right of the browser. If there is any error on your HTML, Safari Tidy will detect it!

Drosera

drosera

Drosera is a JavaScript debugger for WebKit that can be used with any application that uses WebKit. Like the Web Inspector, over 90% of it is written in HTML, CSS and JavaScript. If you are using a lower version of Safari, this is something you need for debugging as this has been replaced by Web Inspector.

Web Inspector

web-inspector

This is something alike Firebug in Mozilla Firefox. The Web Inspector lets you browse the live DOM hierarchy in a compact HUD style window. It also highlight the node on the page as it is selected in the hierarchy. You can also search for nodes by node name, id and CSS class name. This is a must have plugin if you are doing web development with Safari.

XRAY

xray

XRAY is not really a Safari Plugin. It is a bookmarklet for most browser that can be used to look at the box model for any element on the page. You will just have to drag it onto your bookmark panel and hit on XRAY to see the details of the particular box or div. Details such as height,weight,position, etc. Mostly CSS rule details as shown below.This is very handy.

xrayexample

Safari Source

safari-source

This simple plugin allows you to adds syntax coloring to Safari's source view so that it can be view much easier.

Safari Stand

safari-stand

An InputManager plugin that adds various useful functionality, such as bookmark/history searching, thumbnail tab sidebar, view related cookies/css/images for a site. This can be used with Safari Tidy side by side.

Saft

salt

Saft is more like a improvement plugin for Safari than a web development plugin. Nonetheless, it can help you to speed up web development such as crush protection.

If the above Safari Plugin cannot serve you on your web development in Safari, you may wish to look for web based solution to continue web development. The other solution is to use cross browser plugin such as Firebug Lite, Fiddler, NitobiBug or DebugBar which can be found in Here. That is all i have for Safari plugin for your web development need. If you have any more cool plugin you would like to share. Please share it with us!