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).
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.
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.
It also acts as a host for numerous secondary extensions, many of which add sets of functions for specialized areas and programming languages.
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)
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
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)
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.
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.
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)
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.
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.