Top 10 Chrome and Firefox Extensions For Designers and Developers

I have used Google Chrome for the past 1 month. Google Chrome extensions may not be as many as the ones for Firefox, but they are definitely growing. Here are some of Firefox extensions and their comparable counterpart in Google Chrome.

Firefox: Page Speed

Page Speed is an open-source Firefox/Firebug Add-on. Web masters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them. I use Page Speed to optimize my websites.

Chrome: 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. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Firefox: FireBug

Firebug integrates with Firefox allowing you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Chrome: Firebug Lite

Firebug team also creates extension for Chrome. So far I have not been able to use firebug in chrome. I am running Google Chrome 5.0.307.11 Beta under Ubuntu Karmic 9.10

Firefox: HTML Validator

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.

Chrome: Validity

Validity can be used to quickly validate your HTML documents from the address bar. We can either click the icon in the address bar or press Ctrl + Alt + V to validate the HTML document. My experience with validity is that sometimes the icon does not appear in your address bar, so I need to press the short cut key to activate it. It display the number of HTML validation errors, but yet it does not list out what the errors are or how to fix it unlike firefox HTML validator. Validity allow you to install our own HTML validator such as the W3C HTML Validation

Firefox:Colorzilla

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.

Chrome: Eye Dropper

Eye Dropper is chrome’s equal to colorzilla.

Firefox: Firesizer

Firesizer allow developer to resize their firefox browser into specific dimension.

Chrome: 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 as well as a custom option for you to input your own

Resources:

1. Page Speed
2. Speed Tracer
3. FireBug
4. Firebug Lite
5. HTML Validator
6.Validity
7. Colorzilla
8. Eye Dropper
9. Firesizer
10. Resolution Test

Share

Advertisements

About zainul franciscus

Hi, I am a software developer and tech blogger who is currently living in Wellington, New Zealand. I write stuff that I find interesting on
This entry was posted in web development and tagged , . Bookmark the permalink.

3 Responses to Top 10 Chrome and Firefox Extensions For Designers and Developers

  1. Amanda says:

    Hi there, great post!
    Just want to add a little more info:

    There’s another color picker for Chrome that’s a bit closer in functionality to Colorzilla (I like it even better than Colorzilla, actually):
    https://chrome.google.com/extensions/detail/ohcpnigalekghcmgcdcenkpelffpdolg

    The color-picker listed in the article works very well too, I just wanted to present another option.

    Firebug Lite is just a bit too lite for my tastes.
    Chrome has a pretty good built-in developer tool that is VERY similar to the full version of Firebug. Right-click on something, and choose “Inspect Element” to open it. Clicking the magnifying glass icon at the bottom of that window lets you inpect elements on the page (a la Firebug). There’s even a button to dock it to the main window (if you want it to be *even more* like Firebug).

    I highly recommend using this built-in tool over Firebug Lite.

  2. EyeDropper! AhhhhhhhhHaaaaa! Been looking all over for the Chrome version of Colorzilla!

    Karl A. Krogmann

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s