Feature
Post

Category
Code, Webapps


Web Development Browser Extensions

Now a days browser vendors are competing with each other on who has the most and fastest version update. With CSS now a standard technique, the competition is also on on who supports the most selectors and uses the best syntax. Have you seen the gradient syntax? Safari 4 really made an art of it, luckily they came to their senses in Safari 5.1:

/* Firefox 3.6+ */
   background-image: -moz-linear-gradient(#2F2727, #1a82f7);

   /* Safari 4+, Chrome 1+ */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

   /* Safari 5.1+, Chrome 10+ */
   background-image: -webkit-linear-gradient(#2F2727, #1a82f7); 

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(#2F2727, #1a82f7);
}

Code by CSS Tricks

Now that CSS has become so extensive and fully implemented, web browsers extensions are unmissable if you regularly work with HTML and CSS. Extensions have become a standard in most developers their browsers, that there are even more niche ones like for JSON, jQuery and SQLite.

I collected the most used web developer extensions for all 5 main browsers. I’m not an Opera or Internet Explorer user, so I might have missed a good one. Firefox is my main browser and Chrome secondary. I don’t use Safari either, only for testing. I would love to make Chrome my main browser, but I can’t find a nice theme for it, like GrApple which I use with Firefox.

Whether you work with code everyday or not, these extensions are a must in your browser, they’ll save you some headache along the way.

Firefox 4

Firefox 4 Web Developer Extensions

Web Developer

Firebug

Screengrab

It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard. It captures Flash too!

SQLite Manager

JSONView

View Source Chart

Firepicker

Simple color picker plug-in for Firebug.

Safari 5

Safari Web Developer Extensions

Validator

This is an extension to validate your (X)HTML, CSS and RSS feed with the Unified W3C Validator (Unicorn).

User CSS

User CSS is a Safari 5 extension that will easily enable you to override stylesheets for any web page for anything—from changing fonts, colors to hiding ads and more!

Safari Developer

Safari Developer implements features like window resizing, element highlighting, stylesheet disabling, markup validation (and much more).

Chrome

Chrome Web Developer Extensions

Web Developer

Firebug Lite

jQuery Shell

jQuery Shell allows you to run JavaScript and jQuery 1.4.4 multi-line scripts in the context of the current web page.

Eye Dropper

Resolution Test

Opera

Opera Web Developer Extensions

Firebug Lite Button

Validator

HTML5 Outliner

JsonViewer

Formats and highlights JSON data loaded from file or server.

Internet Explorer

Internet Explorer Web Developer Extensions

Internet Explorer Developer Toolbar

Web Accessibility Toolbar

Firebug Lite


  1. By Fraser Boag posted on April 11, 2011 at 11:30 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Nice post. I actually don’t use any extensions at all, don’t really know why! Guess I just can’t be bothered keeping them up to date and I have a constant fear of unneccessarily slowing down my browsing.

    I get by ok though! :)

  2. By Amul posted on April 15, 2011 at 4:52 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Good post . I think of all chrome is the best one

  3. Trackback