You Don't Know Jack About Firefox!

JavaScript Console Techniques

In Chapter 6, Tips, Tricks, and Hacks, we briefly touched on the JavaScript Console. Let's now have a closer look at that tool. It's called a "console" because it's in this tool that any internally-generated messages from scripts will appear.

The console is a real gem—a lifesaver for those debugging JavaScript scripts. One brief attempt by the Firefox team to remove it from the browser for the sake of a smaller download met with such an outcry of protest that the plan was dropped immediately. The JavaScript Console is here to stay.

In helping debug your JavaScript, the console provides an error message, a direct link to the line of the JavaScript file on which the problem occurs, and, if applicable, the context of the error. Figure 7.10 shows the error generated when a string lacks its closing quotation mark.

Figure 7.10. Displaying an error in the JavaScript Console.

The link that's displayed in the error message is an incredibly useful debugging aid. Clicking that link opens the View Source window, complete with a display of the problem page. Better still, the offending line is always centered—and highlighted—for your immediate consumption, as shown in Figure 7.11.

You can filter the entries shown in the JavaScript Console to show only errors, warnings, and messages. Click the text items that look like menu names to see how.

Figure 7.11. Highlighting a syntax error in View Source.

Two hidden preferences affect the JavaScript Console's operation. The first is javascript.options.strict, which is unset by default. Set it to true, and Firefox will sometimes report additional grumpy messages—usually around scripts that were written using poor coding practices. The second preference is javascript.options.showInConsole, which is set to false by default. Don't touch this unless you plan on becoming a Firefox extension hacker.

The JavaScript Console never pops up when an error occurs: you must always start it yourself, by hand. Press the Clear button before each page load to keep the list of messages to a bare minimum. If you do see the console pop up, this indicates that the current page is unwisely using the javascript: URL as a link target. That URL has no purpose other than to reveal the JavaScript Console. The problem page should use href="#" instead.

In Chapter 6, Tips, Tricks, and Hacks, we touched briefly on the use of the JavaScript Console as a calculator. You can perform fancier scripting operations in the console if you work at it a bit. Try typing in the following simple script, then hit Enter or click the Evaluate button: var a=5; var b=6; if (a > b) alert("Impossible"); else a*b;.

The number 30 should appear. If you reverse the sense of this comparison, you should get an alert instead.

Finally, you can use this kind of "on the fly" JavaScript to probe the contents of a displayed Web page, even without the JavaScript Console. Let's return briefly to the javascript: URL. Visit the Google homepage (or any form-based Web page), and type something into the search field (e.g. Foo), but don't start the search. Instead, move to the location bar and type something along these lines: javascript:alert(document.forms[0].elements[1].value).

In the case of Google's home page, this input displays the search text that you just entered. You can look at any part of a displayed Web page in this way. For a more complete approach, try the JavaScript Debugger extension, which we'll touch upon at the end of this chapter.

DOM Inspector Content Analysis

The DOM Inspector, or DOMi for short, is a tool that allows you to view and dynamically edit the Document Object Model (DOM) of XML documents such as Web documents or XUL pages. It's an excellent tool for debugging and learning during Web development, and is almost essential for Mozilla application development (the process of writing Firefox extensions and themes).

With the DOM Inspector installed, you can examine the DOM structure of an HTML document—the set of nested tags that make up the page. That structure is presented in a sideways-displayed, hierarchical tree format. You can zoom in on a particular element within that document, and study a broad range of information about it, including DOM Node object properties, the application of CSS style rules, Box Model properties, and even JavaScript methods and properties.

The DOM Inspector is not installed by default in the Windows version; to obtain it, you must select Custom Installation when installing Firefox. This provides the option to add the DOM Inspector, as shown in Figure 7.12.

Figure 7.12. Choosing to install the DOM Inspector.

If you forget to grab the DOM Inspector at install time, it's not the end of the world. A simple but somewhat disruptive solution is to uninstall Firefox, then re-install it, choosing Custom Install when prompted. A better solution is to download the Inspector as a separate extension. Make sure that you read the release notes carefully before you jump on the download link: at this time, Firefox version 0.9.85 is the absolute minimum version required.

Once you've installed the DOM Inspector, you can call it up via the Tools > DOM Inspector menu options, or via Ctrl-Shift-I.

Let's walk through the use of the DOM Inspector on the SitePoint homepage.

Opening a Document for Inspection

To begin inspecting a Web page, browse to that document in Firefox, then run the DOM Inspector (Tools > DOM Inspector or Ctrl-Shift-I). This will select the currently loaded document for inspection, and display the DOM of that document in the DOM Inspector. You can also select a document from the DOM Inspector's File menu by choosing a window (File > Inspect a Window), or by entering the document's URL into the DOM Inspector's text field and pressing Inspect, as shown in Figure 7.13.

Figure 7.13. Entering URLs for DOM inspection.

Let's load the SitePoint homepage. The DOM Inspector will obediently populate the left-hand Document pane with a hierarchical tree view of the DOM of the page http://www.sitepoint.com/index.html. The right-hand Object pane displays information about the node selected in the left pane. The display is shown in Figure 7.14, after the left pane's content has been expanded a little by the user.

Figure 7.14. Inspecting the DOM of sitepoint.com.

If the SitePoint page doesn't show at the bottom of your DOM Inspector window, add it via View > Browser. I find this a convenient way to match the node being inspected with its appearance in the document. If you prefer the DOM Inspector window to be less cluttered, you can leave the inspected page in a Firefox browser window. To do so, display the page in the normal browser window before opening the DOM Inspector.

Note
There's only one version of the inspected page inside Firefox! The browser window and the DOM Inspector window display that single document in two different ways. This is called "multi-view display."

Selecting Nodes and Page Elements

Once the DOM Inspector is up and running, feel free to play with the page hierarchy shown in the top-left panel. Click on the little plus icons to expand and collapse any part of the hierarchy that seems interesting. This simple action reveals the structure of the page in a way that's separate, and different, from its visual layout.

Note
If you aren't using the default Firefox theme, the plus icons might be replaced with some other icon. Regardless of what the icons look like, they operate consistently.

Another way to access that same level of detail is to select a node for inspection using the Inspect node icon in the upper-left corner in the DOM Inspector toolbar. Selecting Search > Select Element By Click from the menu does the same thing. Figure 7.15 identifies that Inspect node icon.

Figure 7.15. The DOM Inspector's Inspect node icon.

Click the icon to activate the Inspect function, then bring to the front the browser window that holds the page. Click on the page element in which you're interested, and a flashing red rectangle should border the corresponding element (or its parent) within the page display. Return to the DOM Inspector window, where the page hierarchy will be expanded to reveal the matching node, which should be both selected and highlighted. This technique is particularly useful when you're trying to determine the properties of a given element of the document. The DOM Inspector lets you see everything without requiring you to add diagnostic styles or scripts to the page.

This element selection process also works in reverse. Selecting (by left-clicking) a node in the left pane of DOM Inspector will highlight the matching page node with the same blinking red border. That pairing effect is shown in Figure 7.16.

Figure 7.16. Highlighting a DOM Inspector element within the page.

Finally, you can find specific elements by their ID, class, or tag. For example, you can search for <a> tags or <img> tags, or even for the value of a specific attribute, like href="http://www.example.com/", using the binoculars icon, Search > Find Nodes…, or Ctrl-F. Hitting F3 will begin a search for the next matching element in the document.

Information Views

The DOM Inspector can display several types of information about a particular document element. These displays are available from the drop-down menu in the top-left corner of the right-hand panel. Figure 7.17 shows the items in that list.

Figure 7.17. Information types in the Object panel.

We'll take a look at each of these options in turn, and see how they can assist your Web or application development work.

The DOM Node View

The DOM Node view shows the DOM representation of the selected node. The view for the document container—the <html> tag—is shown in Figure 7.18.

Figure 7.18. Displaying the document container in DOM Node view.

We'll see later that this view is most useful when you're dynamically editing the DOM of the current document.

The Box Model View

The Box Model view shows positioning and layout-related attributes of the selected node. Values like the node's dimensions, padding, and margins are all shown. The small menu inside this view lets you pick which vital statistics are of most interest to you. Figure 7.19 shows the possibilities.

Figure 7.19. Inspecting positioning and layout attributes using the Box Model view.

This view is useful when you need to work out where any extra space comes from in a set of nested page elements.

The XBL Bindings View

XBL, or eXtensible Binding Language, is an XML markup language that attaches JavaScript objects and other content to HTML or XML elements in order to make those elements smarter and more functional. The code that's added is called a binding, and it describes the behavior of the bound element. XBL is slightly too advanced for this book, and is not yet a widespread technique within Web development circles. Mozilla application developers—those that build extensions and tools that sit on top of Firefox—are the folks who are most interested in it. Note that more information on XBL can be found at http://www.mozilla.org/projects/xbl/xbl.html and http://xulplanet.com/tutorials/xultu/introxbl.html, should you be interested in application development on the Mozilla platform.

The XBL Bindings view shows the XBL bindings loaded into the inspected document by means of CSS rules. Use it when you're not sure what processing occurs when particular HTML events are targeted on the displayed page element, and you really want to know all the gory details.

The CSS Style Rules View

The CSS Style Rules view identifies the CSS rules that are applied to the selected node. It even shows you which fields the rules are defined in, and the exact line numbers at which they're located. This view lists the original rules—not the rules after they've been cascaded or computed. It's like View Source, but for CSS stylesheets rather than HTML.

You'll often see specified CSS rules that aren't included by the page itself. For example, there are usually CSS files of the form "resource://," such as resource://gre/res/html.css and resource://gre/res/ua.css. These are Firefox's default CSS style rules, which are applied before any rules specified by the Web page. Figure 7.20 shows an example of such a rule in the first line of the top panel.

Figure 7.20. Identifying a CSS style rule in the CSS Style Rules view.

Select a rule in the top half of this panel, and its CSS properties will display in the bottom half; and—get this—you can add, edit, and delete properties, and observe the effects of your changes in real-time through this panel. In other words, you can observe immediately how your CSS rules will affect the layout, and look and feel of the Web page. Believe me, this is extremely useful for testing out experimental changes, or tweaking a page's layout. Since the changes occur in real time, there is no need to fall into the usual (and tedious) cycle of: edit file, save file, refresh page in browser, edit file again, and so on. This would be even more useful if it weren't for the very convenient method of changing a page's CSS in real-time that we'll discuss later.

Let's walk through a simple example that shows the convenience of this feature. On the sitepoint.com homepage, there's a little boxed element that acts as a header for the most recent SitePoint articles. It's shown in Figure 7.21 (but note that the SitePoint site is regularly reworked, so this may change).

Figure 7.21. SitePoint's boxed title element.

Let's suppose that we're in the mood for tweaking, and want to experiment with center-aligned text in a serif font (Georgia looks quite good). Well, if we have direct access to the CSS files on the sitepoint.com Web page, we can make our changes there, upload the new CSS file, and refresh the page in our browser. Unfortunately, we don't have that access. This is where the DOM Inspector can be pretty nifty.

Using the DOM Inspector, we proceed in two steps: find the bit we want to change, then make the change itself.

First, inspect the page and select the element you want to edit. In this case, that's the boxed title element. Now, change to the CSS Style Rules view in the Inspector. You should see something like Figure 7.22.

Figure 7.22. Applying CSS style rules to the selected element.

The CSS Style Rules list shows the rules that apply to the selected node, in ascending order of specificity. In other words, as you move down the list, the rules become more specific, and therefore overrule the list items that come before them. Select the second h3 rule, and the DOM Inspector will fill the lower-right pane with the CSS properties applied from that file. Now you're all set up, and ready to make a change.

Let's change the font to our serif font of choice, Georgia. Find the font-family property in the list, and double-click it. You will see the prompt shown in Figure 7.23; this asks you to enter the property's value.

Figure 7.23. Editing a CSS property.

Enter this string in place of the current value: georgia,"times new roman",times.

Hit OK, and something magical happens. In the original page, the heading displays in our serif font, as you can see in Figure 7.24.

Figure 7.24. Making SitePoint headings pretty with Georgia.

Now, what about centering the text in that box? Well, you'll find that no text-align property appears in the available style sheets, so let's go ahead and add one. To do so, right-click anywhere on the Properties pane and select New Property from the context menu. Fill in text-align when prompted for a property name, and center when prompted for the property's value. When that's done, you'll immediately see the result of your tweaking: the nice, centered, serif font heading shown in Figure 7.25.

Figure 7.25. Centering SitePoint's headings.

If you like the results, just add the changes to your user-defined CSS file to make them permanent. The DOM Inspector doesn't allow you to change the originating site's content, of course.

The Computed Style View

When multiple CSS rules apply to a single element, Firefox combines them to derive a single set of "computed" CSS style rules. The combination (or "resolution") process is based on the rules of precedence specified in the CSS specification. The Computed CSS Style Rules page shown in Figure 7.26 presents this resolved set of rules.

Figure 7.26. Reviewing computed CSS style rules.

Using this, and the CSS Style Rules view, you can observe how Firefox resolves CSS rules. Just alter any sheet—or any sheet property—and observe the changes made to the computed result. This is a very practical and experimental way to understand the rules of precedence in CSS.

The JavaScript Object View

The JavaScript Object view lists the JavaScript objects that can be used to script the selected node. That includes all the traditional page features (access to form elements and links), all the DOM features (for example, adding and removing child nodes, and the nodes themselves), and any script content that's been added by the page designer (such as handlers and extra form object properties). Figure 7.27 provides a glimpse of the numerous object features that are displayed.

Figure 7.27. Reviewing available JavaScript objects through the JavaScript Object view.

A commonly examined JavaScript object is the target object, which contains many properties and methods of the selected node, and is particularly useful for finding out which methods are available on the DOM node.

Editing the DOM Dynamically

With the DOM Inspector in place, you can edit the DOM of the document under inspection "live." This means that you can add or remove HTML content, including scripts and inline styles. Any changes you make are reflected in the document immediately, without the need to reload any files. Figure 7.28 shows the drop-down menu that provides access to these actions.

Reviewing available JavaScript objects through the JavaScript Object view.

Figure 7.28. Editing the DOM dynamically.

In the DOM view of a document, the child nodes of the selected element are typically its attributes. For example, if an <img> element is selected, it would have child nodes src and alt, among others. So this view is more detailed than a simple hierarchy of tags.

Since you're able to edit and delete existing nodes, and insert new ones, you can use the DOM Inspector to experiment with different attributes for elements within your Web page. And, as for other parts of the DOM Inspector, you can observe the effect "live." For example, you might want to replace the src attribute of an img tag with another image, thus swapping the images; alternatively, you might want to toy with table column widths in order to see the effect these changes might have on the columns' proportions.

The DOM Inspector also allows you to inspect XUL pages: the pages that comprise the Firefox browser itself. You can inspect so-called chrome URLs to find out how Firefox's own XUL, JavaScript, and CSS files are coded. Some interesting chrome URLs that are worthy of inspection are shown below.

• To view the browser itself, try chrome://browser/content/browser.xul
• To view the Options dialog box, try chrome://browser/content/pref/pref.xul
• To view the Bookmarks Manager, try chrome://browser/content/bookmarks/bookmarksManager.xul
• To view the JavaScript Console, try chrome://global/content/console.xul

Viewing these pages will blow your mind! Such investigation is an important first step for those making the leap into developing XUL applications, extensions, or themes.

Warning
Editing the CSS or DOM of a document can sometimes have unexpected results. If, in the midst of your DOM or CSS editing, you find that pages aren't displaying properly or as expected, try restarting Firefox. You may have edited a global property that affects all Web pages, or edited a default Firefox CSS rule. These changes, when made with the DOM Inspector, are temporary; a quick restart will undo your changes and restore the defaults. Editing XUL pages is even more risky: make sure you do your homework before you experiment there.

That's it for this excerpt of Firefox Secrets! What's next?

Download this chapter in PDF format, and you'll have a copy you can refer to at any time.

Review the book's table of contents to find out exactly what's included.

Buy your own copy of the book now, right here at SitePoint.com.

We hope you enjoy Firefox Secrets.