Saved By Mozilla
Suppose, out of the blue, you were asked to work on some web pages.
Suppose, also, the web pages all look like this:
<script type="text/javascript" src="bigfile.js" /> <script language="JavaScript"> body.onload = gabudiguk.gabudiguk.gabudiguk(gabudiguk); </script>
Suppose, further, that bigfile.js is a third party library written by a smart Tadzhik that reads:
blah.prototype.blah.prototype.blah = blah(isIE5 && !isIE4 || isNN7 && ! isNN6);
blahblah = function() { blahblah; }
thousands of lines of them. And the most obvious change just doesn't seem to work.
Then,
you will be happy to find out a few tools tucked away in your Mozilla browser's menu:
Tools
Web Development
JavaScript Console
DOMInspector
JavaScript Debugger
The JavaScript Console lets you see all errors and warnings from the JavaScript. The JavaScript Debugger is just that, a debugger. The DOMInspector shows you the DOM tree after all the onload JavaScript has finished, in a tree view.
Click on a node, you can inspect CSS properties associated with the node, including the computed ones. You can inspect JavaScripts associated with the various event handlers. A red box will flash on a page preview window indicating the part of the page that's rendered from that node (a div, or a td, etc.) You can even edit some of the properties or copy the XML (the final HTML) of the node.
It's a good set of tools.