3 Must Have Firefox Add-ons for Web Developers
Friday June 20, 2008 ·
1065 views ·
0 comments
Chefs have their knifes, wood workers their tools, web developers need browser plug-ins. No I'm serious.  Firebughttps://addons.mozilla.org/en-US/firefox/addon/1843 Without out a doubt, the most indispensable tool out there for web developers today. Firebug gives you incredible insight into every aspect of an element on the page, including non visible resources like js and css includes. Firebug gets you the critical and often time-consuming-to-retrieve information need to produce a flawless UI. Firebug has an 'Inspect' feature that lets you mouse over any element in the page and will show you the corresponding HTML that represents it (this includes dynamically generated elements from Javascript), with full details of the every noteworthy css property that either was explicitly or implicitly set... that feature alone is worth it's weight in gold. I no longer have to dig through code to find an element name or css property pertaining to something on the page, I simply highlight it and have instant access to everything about it. Its dom inspection has made life much simpler and me more productive! There are a ton of features in Firebug, most of which I'm still uncovering. But the few things that I have been able to use from it (ie. dom inspection, http request capturing*, partial debugging, resource download metrics) have made me a better developer by allowing me to focus more time on other just as equally important stuff. Definitely give it a try if you don't already have it. Users downloading Firefox 3 will need to upgrade to latest version( v1.2.0b3 as of this writing ).  LiveHttpHeadershttps://addons.mozilla.org/en-US/firefox/addon/3829 Although Firebug has a ton of useful features, it's http capturing is only good for the given request. Its not very useful for the times that you need to capture and log requests/responses over multiple requests, that's where LiveHttpHeaders steps in. LiveHttpHeaders will log the headers of every request (and response) to a detached console where it can be copied or even replayed for mini UI Unit tests. The requests and responses can be saved off for later use. This tool fills in an important gap, that most other plug-ins attempt to do but not 100% right.  ScreenGrab!https://addons.mozilla.org/en-US/firefox/addon/1146 The easiest way to take an make an image of anything you see on your screen. ScreenGrab lets you take full screens shots of the page, with options the entire page (even below the fold) or just the visible parts you see. It also enables you to simply drag a box around anything on the screen and save it to disk or copy it to the clipboard. Forget using Print Screen again. I use this feature all the time when I want to bring in images or entire sections of a site into comps that I have up in Photoshop. It also has allowed me and my development team to easily share UI quirks when testing in different browsers.  ColorSpy http://www.jalpino.com/new/media/apps/colorspy.exe Ok, so this one isn't a firefox add-on, but it definitely is an essential tool for, you guessed it, easily obtaining the hex for any color on your screen. Drag the eye glass over anything and it will give you the rgb, color(?) and hex for that color. ColorSpy runs a 32 bit DOS application so you aren't constrained to the browser like some of the other plug-ins. The app will also always remain on top of your window. I've found this color grabber to be the simplest and most convenient. I know that there are a ton of useful plug-ins/add-ons out there, what are some that you consider to be essential to your working day? Comments
"I have no riches but my thoughts. Yet these are wealth enough for me." - Sara Teasdale
Recent Reads
|
print
email
rss
View RSS feeds