Firefox and your Favorite Developer Addons

Posted: Fri Jan 29, 2010 12:02 pm

If you are developing websites and not using Only registered users can see links on this board! Get registered or login! as your browser, what rock have you been hiding under? Smile

Here's a list of my favorite web developer addons, did I miss any? What's yours?

Library Detector 1.0.2
https://addons.mozilla.org/en-US/firefox/addon/10083
Detects what javascript libraries are being used on the current page and displays the result as icons with detailed tooltips in the statusbar.

Web Developer 1.1.8
https://addons.mozilla.org/en-US/firefox/addon/60
The Web Developer extension adds a menu and a toolbar with various web developer tools.

ColorZilla 2.0.2
https://addons.mozilla.org/en-US/firefox/addon/271
Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies...

Firebug 1.5.0
https://addons.mozilla.org/en-US/firefox/addon/1843
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page...

Shooter 1.1.7
https://addons.mozilla.org/en-US/firefox/addon/13485
Shooter is a Mozilla Firefox browser extension, which allows you to take a screenshot of a given browser page, or a specific region of it.

Html Validator 0.8.6.1
https://addons.mozilla.org/en-US/firefox/addon/249
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing

Posted: Fri Jan 29, 2010 12:44 pm

just a note. I run the 64 bit version of Windows 7. I was using Firefox 32 bit. Firebug didn't run that way, furthermore a lot of the times when firefox was shut down it would leave a running 32 bit process in my process list. In these cases firefox would not start again. I found Namoroka which is the code name for Firefox 64 bit. That runs and firebug runs under it. However, the html validator that works as a firebug plugin kind of bites a big one. It gives you line numbers of errors but no way to get easily to those lines. This is titled validator 0.0.3 and it's home page is http://spaghetticoder.org/validator/ but of course that link doesn't even work. I tried html validator 0.8.6.1 that you recommended. It results in an error about incompatible C libraries when run on 64 bit windows. The web page for html validator 0.8.6.1 doesn't even seem to know that Windows 64 bit exists. Lately I've just been using the w3c web page for validation and pasting my view source code in.

registered · Site Admin Joined: Jun 04, 2004 Posts: 6437

I like Firebug and HTML validator, but I use Screengrab and (as of today) Picnik for web page screen capture.

I also like JSView, InfoLister, IE Tab, OperaView, Firesizer. YSlow hasn't been updated to work with later versions of FF, but it was pretty helpful too.

Posted: Fri Jan 29, 2010 2:49 pm

I installed "IE Tab" a couple days ago haven't really played with it yet.

Other than that I have:
YSlow
Firebug
Fire Query
Html Validator
Web Developer

Posted: Fri Jan 29, 2010 3:10 pm

I should mention just in case ... if you install firebug on a 64 bit Windows system with 32 bit firefox it will screw up some kind of javascript option. Certain screens (like at my stock brokerage) won't work properly. And even if you uninstall firebug the problem is not rectified ... the javascript based screens won't work properly until you totally redo your firefox profile. It creates a mess so stay away from it if you are in that situation.

Nakaroma (64 bit Firefox) is okay but certain things, like Flash, don't work.

Posted: Sat Jan 30, 2010 4:30 am

I already used YSlow, Firebug and HTML Validator, but I just installed Colorzilla and Web Developer and loving it.

Thanks spasticdonkey

Posted: Sat Jan 30, 2010 5:05 am

The one thing thats really missing is an add-on that will turn all add-ons on/off at the click of a button so now I use Firefox for development testing and Opera for normal browsing. Using Ubuntu helps as I usually have several 'desktops' running at the same time, one with all my development software running, NetBeans IDE etc, one with Firefox running and one with Opera running for normal browsing.

I love the Developer plugin but much prefer Total Validator to the HTML Tidy plug-in as it also gives me accessibility information.

Posted: Sat Jan 30, 2010 5:52 am

jakec wrote:

I already used YSlow, Firebug and HTML Validator, but I just installed Colorzilla and Web Developer and loving it.

Thanks spasticdonkey

Your welcome, and no problem... I found these addons all have unique helpful roles in my daily coding duties, so might as well share Smile

Just to give others some ideas:

Library Detector 1.0.2
While browsing the web I often see cool js effects and tweaks, and find myself looking at the source to see what was done. Now I don't waste time looking at some script only later to realize it uses the prototype library, and not jquery...

Web Developer 1.1.8
Many useful tasks, most notably finding broken images, resizing the window to preview themes in different resolutions, outlining and displaying different info about html elements on the page, and many more.

ColorZilla 2.0.2
Pretty self explanatory, ever had someone over your shoulder saying "i like that color there"...? Now you can select it and use it in your designs.

Firebug 1.5.0
Essential tool for troubleshooting complex css issues, as well as debugging content generated by JS

Shooter 1.1.7
There are several addons that perform this task, only one I've tried and works nicely.

Html Validator 0.8.6.1
Often the first thing to check when you are having layout problems, form issues, and of course to help make sure you are writing valid code. One of my favorites as it's also very educational, most of the time offering suggestions on how to fix your issues.

Looks like yslow just came out with a working update. I like yslow, and found it educational, but also thought it was a little overly critical, and gave a little too much info.... If I had all day to optimize one page that got 10,000,000 hits a day, then yes it would be very good Smile

YSlow 2.0.6
https://addons.mozilla.org/en-US/firefox/addon/5369
YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites.

I'll keep my eye on these, but they don't currently have 3.6 compatible versions.

JSView 2.0.5
https://addons.mozilla.org/en-US/firefox/addon/2076

IE Tab 1.5.20090525
https://addons.mozilla.org/en-US/firefox/addon/1419

OperaView 0.7
https://addons.mozilla.org/en-US/firefox/addon/1190

These aren't development related, but I like them and thought they deserve mention.

Flagfox 3.3.20
https://addons.mozilla.org/en-US/firefox/addon/5791
Displays a country flag depicting the location of the current website's server and provides quick access to detailed location and webserver information.

Download Statusbar 0.9.6.7
https://addons.mozilla.org/en-US/firefox/addon/26
View and manage downloads from a tidy statusbar - without the download window getting in the way of your web browsing.

ReminderFox 1.9.6
https://addons.mozilla.org/en-US/firefox/addon/1191
ReminderFox displays and manages lists of reminders and ToDo's. ReminderFox makes sure you remember all of your important dates via easy-to-use lists, alerts, and alarms, right in your browser without the need for a separate calendar program.

Guardian2003 wrote:

The one thing thats really missing is an add-on that will turn all add-ons on/off at the click of a button so now I use Firefox for development testing and Opera for normal browsing.

Well I will say that none of the addons I've suggested have interfered with my ability to use firefox as a normal browser.. Only downside can be the more addons you have usually means more toolbars... which in turn can shrink the view window (in height). It's not too bad, and I can always hide toolbars when needed. Wink

Posted: Sat Jan 30, 2010 7:17 am

Some of the plug-ins I have used, cause some page load lag and there have been cases in the past with some plug-ins have actually caused issues in site JS functionality which disappeared after disabling the plug-in. If I remember correctly, it was the Firebug plug-in I had some weird problems with so a quick way to disable/re-enable installed plug-ins would be something I would find useful.

All of the plug-ins mentioned in this topic have merit so it's really nice to see what other people are using; why they are using a specific plug-in etc.

Here's one not listed, which as a theme developer might pique your interest;

WCAG Contrast Checker Only registered users can see links on this board! Get registered or login!
With this extension you can check the combination of colors on a page to see if it is appropriate for visual perception based on the requirements of the WCAG 1 and WCAG 2

registered · Posted: Sat Jan 30, 2010 7:47 am

Yeah, my favorites (and not just for development) are:

NoScript (a MUST have in my opinion)
Firebug
Web Developer
Html Validator
YSlow
Xmarks
Delicious Toolbar
Save Complete
SEO Toolbar

For security/vulnerability testing:

Greasemonkey
Live HTTP headers
SQL Inject Me
Tamper Data

From this discussion, I just added (thank you!):

WCAG Contrast Checker
Shooter (was using Abduction, but I like what I see here better)
ColorZilla

Worker Joined: Aug 26, 2007 Posts: 236

I use:

Firebug

HttpFox I have tried but it does not work for me.

Posted: Sun Jan 31, 2010 5:14 pm

Check out my recommended addons for various purposes:

Only registered users can see links on this board! Get registered or login!
Only registered users can see links on this board! Get registered or login!
Only registered users can see links on this board! Get registered or login!

You can subscribe to these collections, and get notified of updates. For example, I am testing FoxTabs as a replacement for ScreenDial and Showcase. Overall, FoxTabs is superior, but there are a few quirks, especially with the intial ScreenDial functionality. If you can't see the TopSites screens when opening a new tab, try editing the layout and saving it.

Posted: Mon Feb 01, 2010 3:42 pm

Do you just add to favorites to subscribe?

Posted: Mon Feb 01, 2010 5:18 pm

Looks like it, yes.

Posted: Fri Feb 05, 2010 10:16 pm

here's another one colorful tabs

https://addons.mozilla.org/en-US/firefox/addon/1368

You can customize by domain or go random....

Posted: Sat Feb 06, 2010 1:25 am

NoScript is important for developers too stop download of spyware, that can be used to infect visitors of your site.

Posted: Sun Feb 07, 2010 9:45 pm

Montego,

Regarding Shooter, have you used Screengrab? What do you like better about Shooter than Abduction?

Posted: Mon Feb 08, 2010 7:35 am

I use Snagit for screen grabbing, which is great because it works in IE and Firefox, but you do have to pay for it.

Posted: Mon Feb 08, 2010 8:06 am

For generic screen capture:
If you're using Windows, try the last free version of FastStone Capture. If' you're using Linux, try Shutter.

Specifically within FF, I use Screengrab (for unedited screens) and Picnik (for edited screens with the Picnik webware).