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.
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.
Klemen #
Angelo R. #
Ishan@ILoveFreeSoftware #
Babo #
Rarst #
Babo #
Rarst #
I migliori addon Firefox per i sviluppatori Web - 3sulBlog #
Free Web Directory #
Free Web Directory #
Rarst #
Website designers Chennai #
Rarst #
arbizz web design chennai #
Rarst #