Firefox Hacks [Electronic resources] نسخه متنی

Hack 55. Web Document Debugging Tricks

Firefox has a potpourri of small tricks you can
use to debug your web page.

This hack describes some small features and tricks that can ease the
page creation process. It's all bits and pieces
here. For more systematic techniques, try web page validation [Hack #50], the DOM Inspector [Hack #53], or the JavaScript Debugger
[Hack #56], just for
starters.

5.13.1. Portable Debugging Tricks

These old saws have been supported by most web browsers for a long
time. Here they are again, for completeness. First, some common
tripping points:

JavaScript variables are declared differently in PHP, Perl, and JSP.
Use var in JavaScript, nothing in PHP,
my in Perl, and
int or another type in JSP. Don't
punctuate JavaScript variable names unless they deserve a leading
underscore.

It's document.forms, not
window.forms.

5.13.1.1 Use alert( )

From any JavaScript scriptexcept for proxy,
ReadConfig, AutoConfig, and
preference filesthe mighty alert() spits out a string of text in a
small window, just as MessageBox does under Win32
for Visual Basic and related languages. It also suspends all script
processing. alert() is a property of the
window DOM 0 object in both HTML and XUL scripts.
Here's that trivial tool at work:

var result = 5;
alert("Result times 100: " + (result *100));  // or use window.alert(  )

h5

The javascript: URL scheme allows a line of code to run
interactively. That can also be done in the JavaScript Console (in
Firefox), but there the currently displayed page is not in context.
For a contextual example, try loading the page http://www.altavista.com. Then, type this in
the Location bar:

javascript:document.forms[0].elements[0].tagName

This should be the response (an HTML <input>
tag):

INPUT

To report on a web page's content without destroying
the display of the page, do this:

javascript:alert(document.forms[0].elements[0].tagName)

To perform more complex calculations, just ensure that the last
statement executed returns void. This example sets
the web page script variable total:

javascript: var len = document.forms.length; window.total = len; void;

5.13.1.3 Add diagnostic styles

Place extra styles in your user-defined CSS stylesheets if you want
to highlight specific features of your web page. For Firefox, that
file is called
userContent.css
and is located in the user profile folder. You must restart Firefox
after each change made to this file.

A simple experiment is to add border styles to all HTML elements so
that the blocks and line boxes show up immediately. This is useful
when you are doing table-free web page design and need to know where
chunks of content end. One shortcoming of using borders is that they
contribute to the size of blocks and therefore slightly distort the
normal page layout. Use outline styles (where they are available) to
avoid this effect:

* { border : solid thin; }
* {      outline : dotted thin;        /* CSS 2 syntax */
-moz-outline-style : dotted thin;  /* for Mozilla and Firefox */
}

These kinds of styles can also be applied to XUL via the
userChrome.css files. For XUL specifically,
there is a preference that has a similar but more complicated
outlining effect:

xul.debug.box /* default = false, set to true */

Because a restart is required for hand edits, these changes are hard
to apply for one-time diagnosis. Try the Web Developer
extension's CSSAdd User Stylesheets
toolbar option or, more directly, the ChromEdit extension.

5.13.2. Firefox-Specific Debugging Tricks

Firefox has a few unique
debugging
techniques. For more extensive custom support, try a debug build
[Hack #92] .

5.13.2.1 Use watch points

This code calls a function every time the variable
test is set:

// thing we're going to watch
var test = "foo";
// watcher
function watcher(id, oldval, newval) { alert(oldval + "->" + newval); }
// initialization
watch("test", watcher);
// ordinary processing 
test = "bar";                        // produces alert("foo -> bar");
// decommission the watcher.
unwatch("test");

This logic can be applied to any property of any object.
It's a handy way to see when a property is modified.

5.13.2.2 Tweak preferences

There are a few
preferences
to fiddle with. Here's the first:

browser.dom.window.dump.enabled /* default = false, set to true */

Turning this on makes the dump() host property
available. Call it with a single string argument. On Unix/Linux, the
result goes to stdout. On Windows, you need to
start Firefox with -console to see anything. On
Mac OS X, run the system Console application.

This preference complains about various sloppy techniques that might
appear in JavaScript code:

javascript.options.strict /* default = false; set to true */

It also doesn't like to see any occurrences of the
with statement.

5.13.2.3 Log to the JavaScript console

If your page is running securely (either signed or in the chrome),
you can write directly to the
JavaScript
Console. Here's some script setup that makes logging
messages simple:

var Cc = Components.classes;
var Ci = Components.interfaces;
var cons = Cc["@mozilla.org/consoleservice;1"].getService(Ci.nsIConsoleService);
function log(str) {
cons && cons.logStringMessage(str);
}
log("a test message");