views:

511

answers:

12

Can anyone suggest some good browser add-on tools/extensions to help with development? I have firebug installed in Firefox which is great for dealing with CSS, HTML and javascript; any other suggestions?

Firebug

+2  A: 

The other must-have for Firefox is Chris Pederick's Web Developer Toolbar.

John Topley
+1  A: 

Developer Console and DOM Snapshot for Opera:

http://dev.opera.com/tools/

Awesomeness is that these are bookmarklets implemented with JS. Suckiness is that they require the Internetz.

Ishmaeel
+8  A: 

For Firefox:

Firebug is awesome for investigation and development.

Web Developer Toolbar is good also. Really helps with CSS and page layout stuff as well as much more.

I also use Live HTTP Headers (I think it is called, but it is on my work machine, so can't find the link now). Which has helped us out with caching issues and the like.

I do a lot of mobile phone development, so I also use UserAgent Switcher. Very helpful for pretending to be different mobile phones.

I tend to only use Firefox for development, and just test in other browsers as most do not have the extensive range of plugins to aid development that Firefox does.

Xetius
+2  A: 

You should definitely install Safari. It has a number of tools built-in. I use it in combination with other browsers all the time.

  • Network Timeline
  • Error Console
  • Web Inspector
  • Snippet Editor

Plus it lets you set the user agent for your requests.

Consider this, it has a separate top-level menu called Develop.

Vaibhav
+5  A: 

Firefox:

Edit: This is in addition to the Web Development Toolbar mentioned by others

Cebjyre
+2  A: 

In case of IE, next tools can be useful

The "uber" extension for IE - "Developer Tools", provided as a part of IE8

Aquatic
+1  A: 

Firefox:

Inspect This if you use the DOM Inspector at all

Measure It for telling you pixel distances (if you need that)

IE View or Safari View for ease of testing in other browsers

HTML Validator if you care about validation

Console2 to improve your js error console

The Javascript Shell bookmarklet is also handy (and look at the others there as well)

This is in addition to the Web Development Toolbar mentioned by others

This list by Cebjyre is nearly complete (since FireBug was already mentioned in the question). I would only add Tamperdata. From time to time it is very useful.

Mo
+2  A: 

Opera has:

Dragonfly (tools -> advanced -> developer tools)

Debug Menu

UserJS methods for intercepting things

opera:config#CompatMode%20Override for forcing quirks or standards mode

Web developer widgets

You can view source of files, edit them, apply changes and reload from cache.

Shadow2531
A: 

Other than the excellent tools already mentioned, I find Charles to be extremely useful. Especially since I do alot of work with Flash Remoting which it handles excellently.

Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).

Charles can act as a man-in-the-middle for HTTP/SSL communication, enabling you to debug the content of your HTTPS sessions.

It's crossplatform, costs $50, but there's a "30 minute per session"-evaluation you can download.

grapefrukt
A: 

Here's what I use:

Firefox:

  • DOM Inspector: I use this more than anything else for web development
  • Launchy: for opening sites in other browsers/apps
  • Tamper Data: this can be helpful for debugging GET/POST requests
  • Web Developer Toolbar: this has so many handy features for debugging: the W3C validation tools, built-in ruler, resizing tools, source manipulation, easy cache/css/script tools

IE:

Misc:

  • Jesse's handy bookmarklets: the shell bookmarklet is especially handy
  • I also install Safari and Opera, but mostly just use them for testing and benchmarking since their dev tools aren't as robust as Firefox, and they aren't as buggy as IE.
  • Lynx: I use this to make sure that any JS-heavy sites still work so that I'm sure they'll look OK to google, screen readers, and any other bot-like app.
travis
+1  A: 

Here's my development oriented add-ons for Firefox 3:

  1. Web Developer
  2. Firebug
    1. Firecookie
    2. FirePHP
    3. Rainbow
  3. TamperData
  4. Poster
  5. FireFTP
  6. ReloadEvery
  7. Selenium IDE
dlamblin
+1  A: 

YSlow is a sweet Firebug addon for troubleshooting a page's load time.

ojrac