Which tools do you use to debug HTML/JS in your browser?

I'd like to collect the best debugging aids for all browsers out there. So that would probably be Firebug for Firefox but what do you use for IE? Safari? Opera? Opera Mini? What else is out there? Are there tools that work well for I开发者_运维百科E 6? IE 5?

For Firefox (any version > 2.0), use Firebug.

Here is a roundup

• Firefox has Firebug and Webdeveloper Toolbar,
• Safari and Chrome has the Inspector,
• Opera has Dragonfly,
• Internet Explorer has the Developer Toolbar

Firebug still has the most advanced features, but the others are catching up.

For IE, either the Developer Tools included in IE 8 or the Developer Toolbar.

For Chrome, Chrome Dev Tools.

1. IETester for IE-versions.
2. Adobe BrowserLab or SuperPreview extension for IE for testing designs in multiple browsers.
3. Developer Toolbar for IE.
4. And ofc Firebug for FIrefox.

In Internet Explorer or other Browsers than FireFox:

FireBug Lite

For debugging, nothing can beat firefox:firebug
and for IE, if once in a blue moon i use IE, i use, Internet Explorer Developer Toolbar

The Speed Tracer extension for Google Chrome looks extremely useful.

dynaTrace Ajax for Deep Tracing of Internet Explorer

• Fiddler http(s) debugging: http://www.fiddler2.com/fiddler2/
• Web Developer toolbar for FireFox: https://addons.mozilla.org/nl/firefox/addon/60/
• IE8 Developer Tools: http://blogs.msdn.com/b/ie/archive/2008/09/11/introducing-the-ie8-developer-tools-jscript-profiler.aspx
• qooxdoo Inspector (IE, Firefox, Opera, Safari and Chrome): http://qooxdoo.org/application/inspector
• Blackbird - You might never use alert() again: http://www.gscottolson.com/blackbirdjs/

Firebug / Firebug lite of course :) Google Chrome's JS console is also very nice

Cross-browser: x-ray

I suggest to use a DIV with the id="debug" and then add text to it for debugging. That allows you to overlay the HTML with the debug output and it doesn't block the flow of the app. Use a z-index to make sure it stays on top and give it transparency so you can see through it. See this answer for the CSS.

Or open a new window and append your debug messages there.

You can use this with nested DIVs to implement full-fledged logging. Have a look at this article on A List Apart and at log4js to get some ideas.

Firebug is not the most lightweight tool, so I sometimes use other add-ons for Firefox:

• If you're playing with XPath, XPath Checker is handy and lightweight. I tweaked it on my own however to display the HTML source of results as text rather than as HTML nodes.

• Tamper Data or HttpFox are useful to see the request from webpages (well, AdBlock Plus also can be;), see the cookies being set by the web server etc.

For Firefox 3.5, use Firebug. For IE8, use Developer Tools

Using Firefox, in addition to Firebug (as many have previously mentioned) I find Mozilla's Venkman JavaScript debugger rather handy from time to time too.

A series of strategically placed window.alert function calls is handy in a pinch. If I can, I try to use Firebug Lite.