Firefox add-ons for web development

I make no secret that Firefox doesn’t fit my browsing needs at all (Opera does). Still there is a factor of extensions which has a lot of to do with Firefox brand success. If only it could be usable for browsing as well, can’t have it all. :)

Anyway I was remaking my portable Firefox web development setup and thought it would do nicely for a post (and I won’t have to keep that many links in my bookmarks).

Why bother

Web development is easy enough to do with Windows Notepad alone. And hard enough that you will absolutely hate it that way.

Development tools can simplify many aspects of process – from troubleshooting to references. And since all of action happens in the browser it makes a lot of sense for such tools to be tightly integrated with it.

Firefox Portable

I like stuff to be contained and easily transportable. Good news – PortableApps provides nicely packed Firefox. Bad news – it is even slower than regular one and can’t self-update without breaking.

For me it will do and it works with extensions just fine.

Link http://portableapps.com/apps/internet/firefox_portable

Firebug

This extensions gets most of coverage on topic of web development and it more than deserves it. Firebug has massive set of functions that help with core aspects – (X)HTML, CSS, JavaScript and more.

It also acts as a host for numerous secondary extensions, many of which add sets of functions for specialized areas and programming languages.

Link http://getfirebug.com/

YSlow

One of my most favorite toys. YSlow is highly useful and easy to use to determine bottlenecks in site performance. It packs a lot of information in convenient graph and reports, as well as links to valuable advices for every aspect.

Link http://developer.yahoo.com/yslow/ (requires Firebug)

Page Speed

Google’s take on same issues as YSlow. Shares much of the principles, but brings own functions to the table as well. Less about fancy graphs and more about deeper and more obscure aspects of page performance.

Link http://code.google.com/speed/page-speed/ (requires Firebug)

My post on YSlow vs PageSpeed

CodeBurner

This extensions doesn’t pay much attention to what you are working on and only aims to supply you with excellent reference on HTML and CSS syntax. It allows to search for tags quickly and provides cross-browser compatibility information and code examples.

Link http://tools.sitepoint.com/codeburner/ (requires Firebug)

Web Developer

This extension adds browser toolbar with wide array of functions. Roughly there are three types functionality in it: control of browser internals (such as cache), graphical overlays on page and validating page in external services.

Link http://chrispederick.com/work/web-developer/

Html Validator

This extension crunches page through one of two (or both) validation engines and finds possible markup errors. It also integrates nicely into source code view window and makes it very easy to find and fix errors.

Link http://users.skynet.be/mgueury/mozilla/

CSS Usage

Simple tool for tricky task – analyzes current CSS style sheet and tells what rules are used on page and what are not. Hell of a manual task, made easy by computing.

Link http://spaghetticoder.org/cssusage/ (requires Firebug)

ColorZilla

Something I picked up today. It has all boring functions of generic color picker, but also adds some interesting stuff like scanning current page for palette. Integrates nicely into status bar so it is always close.

Link http://www.colorzilla.com/firefox/

Overall

This set of mine clearly drowns Firefox way below speed an convenience thresholds, adequate for browsing. But for web development it packs array of highly powerful functions, which are conveniently organized and visible in interface.

Have any favorite development extensions? Share them in the comments.

Related Posts

15 Comments

  • I would also like to recommend MeasureIt, goes well together with ColorZilla and can be extremely useful.

  • The only other addon I use is FireFTP. It’s nice to have an FTP client right through Firefox, although it’s only present on my laptop.

  • @Klemen

    I am used to measuring stuff with PicPick Tools. Actually it has color picker as well, I only decided to try ColorZilla because of extras.

    @Angelo

    As for me FTP makes much more sense integrated in file manager, rather than in browser. :)

    @Ishan

    I am historically using Windows Live Writer. Writing posts is another function that has little to do with browser as for me.

    @Babo

    I think YSlow does all of that rather conveniently. On other hand YSlow requires relatively slow page scan so this may be a factor for people who need that info fast.

    Thanks for suggestions! As always even if not a fit for me, there are other readers who might like and need those suggestions more. :)

  • View Dependencies is more for superfast check of a pics, css, scripts on a page, known or unknown. Sizes, type, check of stuff missing. Something you do just like that, on the fly. Kind of addictive once you get started. Can’t really get same snappy overview with any other tool though Firebug etc. does much more. Web developers “View Document Size” under Information is pretty much the same, but then you get new tab open. Annoying.

    If you have need to check links try Pinger https://addons.mozilla.org/en-US/firefox/addon/10201 Think it is the best/fastest.

  • @Babo

    For links I prefer periodic complete checks with tools like Link Examiner.

  • 1+ for Klemen post!

  • Sorry, for double post, just amm… can you tell me why is firebug usefull? I only use it for css and html to check code.
    Why some addons requires this addon?
    Thanks

  • @Free Web Directory

    I hadn’t looked in technicalities, but I think basic idea is that Firebug takes care of parsing and watching CSS+HTML+DOM. So other extensions can hook into that data and don’t need to reimplement it.

  • This html validator addons-http://users.skynet.be/mgueury/mozilla/ which u posted are very useful.really useful addons.especially this one fix this error.and its good for our work.thanks for sharing

  • @Website designers Chennai

    Yep, that validator rocks. Some people tend to sneeze at striving for valid code but I think it is essential tool to quickly and efficiently debug markup.

  • I would also like to recommend MeasureIt, goes well together with ColorZilla and can be extremely useful.

  • @arbizz web design chennai

    I think I’ve tried that one but didn’t find it particularly necessary.

    By the way I would appreciate it if you use something more substantial as nickname. :) It isn’t used for link anchor anyway.

Comments are closed.