Recommended Browser Add-ons and Extensions

I tend to find myself reinstalling many Firefox add-ons every time I reload a machine or a wipe a hard drive. I figured I would do everyone a favor by listing links and reasons for each of my faves. Listed in order of necessity.

1. Firebug
   What can’t a web developer do with FireBug? Inspect the DOM tree in real time. See Firefox’s . See all matching CSS selectors and the cascading effect of each attribute on an inspected element. Most useful of all: Javascript global “console” object [i.e. console.log($('some-object-htmldom-id')) ] for logging objects with their instantaneous state (even better than PHP’s “print_r” function… if that’s even possible).
2. Web Dev Toolbar
   Many general web development utilities packaged into one toolbar. I mostly use it to inspect the contents of my DOM-loaded JavaScript (via Information -> View JavaScript).
3. LiveHTTPHeaders
   Inspect the HTTP headers (both Request and Response) for your GETs and POSTs. Use [alt/option]-L to toggle visibility of the side-bar. Can be mostly replaced by the “Net” tab of Firebug, but makes grabbing some Flash-requested URLs (MP3s, JPEGs and FLVs/AVIs come to mind) very covenient.
4. FoxMarks
   Store your Firefox bookmarks in a centralized repository. The Add-on uses version-control to keep each of your FoxMarks-equipped browsers synced with your repository.
5. Extended Copy Menu
   Tired of inadvertantly grabbing HTML/rich text when you select and copy text from a web page? Copy to the clipboard only the type of content you want. Great for copying text from your browser to MS Word/Wordpad.
6. Linky
   Quickly crawl (in the same sense as a web crawling agent) multiple links from a web page. Also parses hyperlinks from text on html/text pages. Smart tool that does a little interpolation where needed. Options to open each link to a new tab or a new window.
7. User Agent Switcher
   For those times when you need to imitate another user-agent and you don’t have wget/curl handy. You can spoof a GoogleBot user agent to see what content sites give to the Google crawler but not to the general public.
8. FoxyTunes
   Why don’t web browsers allow you to control your music-player software without an add-on? FoxyTunes takes up that exact slack.
9. Venkman / JS Debugger
   Always installed, but never used. I prefer to do all of my debugging with Firebug and WebDev Toolbar. Many companies these days look for developers who use Venkman as a resource.

So you run IE/Safari/Opera/etc.? Pfft! Firefox has the web development community on lock. There are some useful tools for debugging other browsers, but I’m hooked on these.

If you are absolutely stuck on using IE6/7/8… You can try using official Microsoft Developer Toolbar for IE, but my experience is that the feature set is a subset of Firebug’s. If you are looking fro something different than Microsoft’s only offering, you can look towards Fiddler; one of my previous supervisors “lives by” it. I think I would “die by” it if I was forced to debug a site in IE only.