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?

Answer 1

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

Answer 2

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

Answer 3

dynaTrace Ajax for Deep Tracing of Internet Explorer

Answer 4

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

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.

Answer 6

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