Useful Firefox and Chrome Addons for Web Developers
Written on Nov 11, 10 4:42 am | Web Development Neoseeker Related 6 comments
|
Like
+my favs | tags: chrome firefox
Firefox Web Developer Addons
- User Agent Switcher: useful for teasing sites (like Neoseeker) into showing you their mobile mode for easier development.
- JSONView Prettifies JSON output so that it is easier for you to read (eg colour coding + improved layout). Very useful for when looking at various RESTful API JSON output.
- Live HTTP Headers: Let's you track all incoming and outgoing header requests and responses as you visit pages. This is great for watching your redirects as well as the total volume of JS calls that ads and other features make.
- MeasureIt: allows you to measure anything on any site. I see people take screenshots of a site and open it up in Photoshop to measure box sizes, etc, but MeasureIt let's you do it right in the browser. It is super handy.
- colorzilla: Again, instead of trying to take a screenshot and sampling the colour of something on a webpage, use ColorZilla to grab it right off the page. It even auto pastes the colour to your clipboard.
- Firebug - this one really needs no introduction, though I don't suggest you enable it for regular surfing due to the way it eats up memory. Because I have firebug installed I don't do any regular surfing on Firefox in order to prevent it from eating 500-800MB of my memory. Firebug is also useful in that it let's you inspect elements on a page
- Web Developer Toolbar: a must have for any developer. Use it to disable JS and test fallback mode, disable meta refreshes for other testing,
- Toggle Developer Toolbar a simple plugin to let you toggle the developer toolbar on and off so you can save some screen real estate.
- YSlow - YSlow contains tools that helps time how long various javascript and media elements take to load up on your site. This is mostly for client side optimisations. Safari users already have some of the features natively in their browser.
Chrome Tools for Developers
Since I use Chrome as my primary browsing browser I don't install alot of extensions related to Web Development. Those who want to though can install many of the same tools that Firefox has such as:
- JSONview for Chrome
- [Chrome to Phone] I use this to send pages to my Android phone so I can double check how it formats in the mobile. A similar plugin for iOS is available on both Chrome and FF.
- Speed Tracer - yet anther client side performance measurement tool.
- Resolution tester - change resolutions to see how a page might look. Firefox's Web Developer plugin supplies the same functionality.
- Pendule - the equivalent to the Developer Toolbar, includes the ability to disable CSS, images, etc.
- Web Developer - an actual port of the Developer Toolbar. This one is interesting and different from Pendule in that it includes tools to outline common things you need to find like unsecure elements (handy for finding anything not in [link name=https:// on]https:// on[/link] an [link name=https:// site),]https:// site),[/link] finding images without alt tags, oversized images, etc.
- MeasureIt! Same as the plugin in Firefox
- View Selection Source - as name implies, add functionality to view selection source, a feature native to FF.
Comments
Vancouver, BC, Canada 
Add as NeofriendPost Information
report this!Archives
February 2011 (1)
December 2010 (3)
November 2010 (3)
October 2010 (1)
September 2010 (1)
August 2010 (1)
July 2010 (2)
June 2010 (1)
April 2010 (2)
February 2010 (1)
January 2010 (3)
November 2009 (2)
September 2009 (2)
August 2009 (2)
July 2009 (2)
June 2009 (1)
May 2009 (2)
April 2009 (2)
March 2009 (2)
February 2009 (1)
January 2009 (6)
December 2008 (3)
November 2008 (1)
Favourite Blogs Updates
Favourite Blogs List
Latest Gallery Images
I also have the web developer toolbar but rarely use it.
I didn't know about Colorzilla though... I feel silly now for constantly throwing screenshots into photoshop to figure it out that way.