Debugging JavaScript with Firefox

Here are some miscellaneous tips for debugging HTML, CSS, and JavaScript in Mozilla Firefox.

They include references to Firefox extensions (plug-ins) that you will need or want, as well as tips for configuring Firefox, how to actually invoke the debugging procedures, and a few shortcuts to keep in mind. A number of landmines are also pointed out along the way. (Please avoid stepping on those, because it gets messy.)

Minimally Required Firefox Extensions:

- Does your installation of Firefox have a DOM Inspector option on the Tools menu? If not, reinstall Firefox with the Developer Tools option turned on (Custom | Developer Tools).
- Install the Web Developer Extension (http://chrispederick.com/work/webdeveloper/), if you have not already done so.
- Install the JavaScript Debugger (aka. Venkman, http://www.mozilla.org/projects/venkman/).

Optional Firefox Extensions:

- Install View Source Chart (http://jennifermadden.com/scripts/ViewRenderedSource.html)
- Install the Load Time Analyzer (by Google).
- If you are running on Windows, you might want to install IE Tab (http://ietab.mozdev.org/).
- 200+ other developer extensions are listed at https://addons.mozilla.org/search.php?cat=4.