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(  )

5.13.1.2 Probe page contents with javascript: URLs

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");