Which Web Development Browser Plugins Do You Find Useful?

Question

I find that when I am doing web development there are a few browser plugins that are very useful to me.

For Firefox I am using:

Firebug - Great for inspecting the HTML elements and working with CSS.

YSlow for Firebug - Developed by Yahoo! and gives timing and tips about page resources.

Live HTTP headers - Lets you inspect the headers that are sent to your browser.

For IE I am using:

Fiddler - "a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet"

I am always looking for other great tools to use. So what is everyone else using?

Answer 1

IE Developer Toolbar
Venkman debugger for Firefox

Answer 2

In addition to what you have:

Web Developer toolbar adds alot of extra functionality (cookie, form, image inspection, viewing generated DOM, etc).

HTML Validator - great for a quick check to make sure your pages are valid. Also good when there are display errors, you can quickly see if it's from improperly generated HTML.

ColorZilla - I use this alot to pull exact colors from a page to the clipboard.

Answer 3

Fireshot -- takes screenshots and annotates them convieniently, helpful.

Answer 4

Firecookie and console 2

Answer 5

How about twitterfox to help twitter with developer colleagues and friends.

Answer 6

Extended Statusbar modifies the status bar to show speed, percentage, time, and loaded size (useful for seeing how many images are being loaded, page weight, etc)

ShowIP Displays the IP address of the current page in the status bar

external IP Displays your external IP address in the statusbar

On a side note, I also find it useful to run these extensions in FirefoxPortable, so that I've got a browser setup specifically for development work with the relevant extensions installed, and to avoid slowing down or destabilizing my primary browser (eg. Firebug used to crash my browser all the time when accessing Gmail).

Answer 7

URL Params (Firefox extension) to view the POST and GET parameters of a webpage. Useful for checking your forms.

Answer 8

MeasureIt

For getting exact size of items rendered on a page in FF.

Answer 9

HttpFox

Answer 10

Firebug - Also let's me see the JS requests being sent from one page to another and which data is being sent.
- I can see the data inside the JS variables
- Replaces Error Console. It also outputs in the statue if it has found an error, so I can inspect it.
- Good for seeing the structure of the html when developing AJAX application.

Answer 11

The one that prevents you from accessing StackOverflow is pretty useful.

Answer 12

All of these are Firefox plugins.

• Firebug for Javascript and CSS debugging. Firebug allows for example to examine DOM tree while javascript modifies it. Firebug is my main tool.

• Live HTTP Headers for looking at what data actually is inside request and responses.

• Web Developer toolbar contains smaller utilities. For example it can validate html and CSS.

• Dust Me Selectors finds which pieces of CSS are unused.

Answer 13

I can't live without DebugBar (IE only)

It allows you to view the source (syntax highlighted) of any frame, view the DOM, view JS and CSS. It also has a rather handy colour picker which you can drag onto any part of your screen, it will then put the #RRGGBB in to the clipboard.

I also use Fiddler2 quite a bit.