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

Question

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 IE 6? IE 5?

Answer 1

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

Answer 2

For Chrome, Chrome Dev Tools.

Answer 3

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.

Answer 4

In Internet Explorer or other Browsers than FireFox:

FireBug Lite

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

dynaTrace Ajax for Deep Tracing of Internet Explorer

Answer 9

The Speed Tracer extension for Google Chrome looks extremely useful.

Answer 10

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

Answer 11

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

Answer 12

Cross-browser: x-ray

Answer 13

• 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/

Answer 14

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.

Answer 15

A series of strategically placed alert function calls is handy.

Answer 16

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.