You Don't Know Jack About Firefox!

Sample Secrets

Chapter 6, Tips, Tricks and Hacks

There are many subtle features hidden beneath the Firefox hood, many of which aren't accessible from the menu system: some even require that you learn hidden keyboard incantations! In this chapter, we dive into the deep end of the pool, where such wonders lie. We'll take a look at Firefox's hidden preferences, and uncover the hidden mysteries of your Firefox profiles. We'll also explore some useful tricks that do everything from speeding up the browser, to changing the way it looks and responds.

The Secret Named about:config

Firefox is designed to be immediately usable, without any configuration effort. There's no confusing glut of preferences and options in the user interface—a problem that plagues a number of other applications and Web browsers. By design, Firefox has fewer configuration interface intricacies than do comparable tools.

While this approach is vital for everyday use and for the "everyman" user, "power" users need something more flexible. Those special users are not left in the lurch, though, because Firefox has numerous extra preferences that one can set, albeit via a somewhat unofficial method. Such hidden preferences are managed through the about:config configuration page. This is a special interface to the Firefox preference system.

To call this interface up, type the special URL or Web address, about:config (yes, that's correctly stated) into the location bar, and hit Enter. You should see something like Figure 6.1.

Figure 6.1. Introducing the about:config interface.

Instead of an HTML Web page, the special preference system is displayed, using Firefox's own XUL page display language. The about:config page is a bit like a dialog box, except that it sits inside the existing window, rather than a window of its own. In Figure 6.1, the page is displayed inside a single tab.

Some explanation of this interface is in order. Each line in the list reflects a single preference. You can see five such lines in Figure 6.1. Each preference has a name and a value. The Status column of a preference indicates whether it is set to the Firefox default value (default), or has been changed by the user to something else (user set). The Type column of a preference identifies the kind of data that preference holds.

Note
Preferences can be one of three types: string, boolean, or integer. String preferences are simply text strings (like "hello"), which include URLs (https://update.mozilla.org/extensions/?application=%APPID%). Boolean preferences are yes/no options; they hold either true or false. George Boole, a famous scientist, was the first to explain how to work with true/false values, so they're also called "Booleans." Integer preferences take on any integer value (such as 1, 2, 23, 1099), but can't accept decimal numbers like 5.4.

At the top of the page you'll see a Filter text field into which you can enter some text to filter out preferences. This is very handy, since the full list of preferences spans a good number of pages.

Modifying Preferences

Changing an existing preference is very simple. Just double-click on that preference's line, or right-click on it and select Modify. The values of Boolean preferences will be automatically toggled (swapped from "true" to "false" or vice versa). Modifying string and integer preferences causes a dialog box to appear, prompting you for the new value for the preference.

As you make your changes, you'll notice the status of the preference changing from default to user set, and that the preference text is displayed in bold type. This provides a clear indication of preferences that have been changed from the built-in browser defaults.

Among the hundreds of Firefox preferences there are some particularly handy ones that help to make Firefox even better than it already is. Let's discover a few of these hidden gems.

Speeding up Firefox

Here's a configuration tip that enables Firefox to download Web pages faster: enable HTTP pipelining. HTTP pipelining allows Firefox to send multiple requests at the same time, resulting in faster loading times for Web content. Note that more technical details on HTTP pipelining are available.

Warning
HTTP pipelining is an experimental feature and can cause some Web pages to display incorrectly if they're not properly supported by the Web servers. While the speed improvements may be worthwhile, if your favorite Web pages start to look weird, try turning pipelining off again.

To enable pipelining, open the about:config interface and:

• Set the network.http.pipelining preference to "true" to enable HTTP pipelining for Web access that's "direct connect."
• Set the network.http.proxy.pipelining preference to "true" to enable HTTP pipelining when the Web is accessed via a proxy server. You only need to do this if you're using a proxy server; your ISP or network administrator can tell you if that's the case or not.
• Set the network.http.pipelining.maxrequests preference to a number between 1 and 8. This number is the maximum number of requests that Firefox may send out at any one time in a pipeline. I recommend it be set to the maximum of 8 initially, then test working backwards from there. (The maximum is 8 as specified by the HTTP 1.1 specification; don't try to set it any higher, as this will have no effect.) Step the value down by one (first to 7, then to 6, and so on) each time you notice the page display having problems.

With this hidden preference, you have to restart Firefox entirely before you can determine if a speed boost has been gained.

Inline URL Auto-completion

Here's a useful hack to enable inline auto-complete for URLs. When this feature is working, whatever you type into the location bar is automatically completed by Firefox with the closest possible match that can be determined from the browser's history. You can hit Enter when you get a match, or keep typing. This is much like the Inline AutoComplete feature in Internet Explorer. Figure 6.6 shows it at work.

Figure 6.6. Inline auto-completion in the location bar.

To enable this effect, you must add a preference that doesn't yet appear in the about:config list. Go to about:config, right-click anywhere on the page, and select New > Boolean from the context menu, as shown in Figure 6.7.

This menu choice yields a couple of dialog boxes. Enter browser.urlbar.autoFill when prompted by the first dialog box, as depicted in Figure 6.8.

Select true when you're prompted to select a value, and that's it: inline auto-complete for URLs is activated! There's no need to restart Firefox in this case; it works straight away.

Figure 6.7. Creating a Boolean preference in about:config.

Figure 6.8. Naming the new preference.

Chapter 7 - Web Development Nirvana

Warning
This chapter is geared towards Web developers and designers, and assumes some knowledge of Website creation.

From its penchant for Web standards compliance, to its built-in Web developer-friendly features, and onwards across the amazingly useful plethora of Web development-oriented extensions, Firefox is, without doubt, a far more useful Web development tool than any other Web browser! Such hyperbole, is, in this case, entirely accurate.

Firefox's checklist of useful tools is extensive. Friendly and actually useful JavaScript debugging tools—check. Provision of detailed Web page information—check. Real-time DOM inspector and editor—check. Ability to view HTTP headers as they are returned from a Web server—check. Validation of HTML, CSS, and accessibility conformance with minimal clicks—check.

Using extensions, you can even edit the CSS of a living, breathing Web page and observe the results immediately. It doesn't even matter which Website the Web page comes from!

In this chapter, we'll explore Firefox's Web developer-friendly features. We'll also delve into the extensions that make indispensable tools for so many Web developers (including myself: I've been a freelance Web developer since 2001 and I'm currently employed as a Java Web developer). Read on if you want your development work to proceed as smoothly and professionally as possible.

Firefox's Standard Tools

You don't need to buy or download anything to get started. Many useful tools lurk inside the standard Firefox install.

Viewing Source Fundamentals

One of the first tasks with which many Web developers find themselves involved is examining the source of other people's Web pages, whether for debugging purposes, as a learning aid, or simply to satisfy their own irrepressible curiosity. Firefox comes with a nifty page source viewer that offers built-in syntax highlighting. Highlighting makes it easier to read the HTML source, and simpler to grasp the implied structure of the page.

You can view the source of a page using the menu system: choose View > Page Source. Alternatively, right-click and choose View Page Source from the context menu, or hit Ctrl-U. Figure 7.1 shows the scrutiny of a typical page's source; in this case, it's the Firefox homepage on the Mozilla Website.

If you read and write HTML for a living, you probably already use an HTML editor that offers syntax highlighting. Modern browsers should perform to the same level. Yet Firefox's support is far superior to simply opening a black-and-white Notepad session—the default action for Internet Explorer 6.0.

Viewing Selection Source

Sometimes, viewing a whole Web page is just too much. Have you ever wished that you could check the HTML source of specific page elements on their own? (Generating dynamic content is a common Web development task that's always prone to careless mistakes, or so I've found.) Perhaps you saw a well-designed element on someone else's Web page, and wanted to know how it was done. Using Internet Explorer, you would probably view the HTML source of the entire page, then use the find/search function to locate the matching piece of HTML. This can be an unreliable process that depends on your recollection of contextual clues from the page, or other obscure hints.

Figure 7.1. Viewing the source of the Firefox homepage.

In Firefox, this process is hassle-free. Just use your mouse to highlight the interesting elements of the page, right-click, and then select View Selection Source. For example, if you want to find out how an input form's checkbox is coded, just use your mouse to select the whole checkbox; then, click the right mouse button and choose View Selection Source. That's shown in Figure 7.2, where the "Remember Me?" checkbox is highlighted.

Figure 7.2. Choosing View Selection Source from the context menu.

In return, Firefox will show you the HTML of your selection, and its surrounding code, as shown in Figure 7.3.

Figure 7.3. Displaying source code for the selected source.

View Selection Source has saved me countless times as I've coded HTML forms, in which it's easy to make trivial syntax mistakes. View Selection Source lets me quickly check any form elements that don't seem to be working properly. (Often, the cause of the error is an incorrectly named form field, or the omission of a closing quotation mark.)

View Selection Source is also a great tool for helping developers learn from the best. Often, I find myself looking at the source code of Websites created by the best Web developers and designers. To learn something new, I just view the source of the interesting part of the page in question. By narrowing down the HTML source to a specific area, View Selection Source saves time and keeps me focused.

Page Info Document Reports

Firefox provides very detailed information about Web pages via the View Page Info feature, which you can access from Tools > Page Info, or by right-clicking on the page and selecting View Page Info from the context menu. Either method pops up the Page Info window, shown in Figure 7.4, which tells you everything you'd ever want to know about the page.

Figure 7.4. Displaying Page Info for sitepoint.com.

Each of the tabs at the top of the window represents a logical area of information about the Web page. Let's go through each tab and identify which bits are useful to Web developers.

The General Tab

As its name suggests, the General tab shown in Figure 7.4 displays general information about the Web page, including its MIME type, character encoding, and the size of the page. The character encoding information is particularly useful for those working on internationalized Web pages. If you've had any experience developing Web pages in multiple languages (and, therefore, using multiple character encodings), you'll know that if you're not careful, you'll create incorrectly encoded pages that display as gibberish. Ensuring that you're using correct character encoding can save a lot of debugging time down the track. For instance, just because you set the meta content-type to "iso-8859-1" doesn't necessarily mean the Web page is using that encoding!

Notice also the Render Mode field. This indicates how the Firefox layout engine (called Gecko) renders the Web page. In Standards compliance mode, Firefox renders the content exactly in the manner described in the HTML and CSS specifications. Quirks mode, on the other hand, accommodates existing and poorly made Web pages that are coded to older standards, or are not coded to standards. Pages displayed in Quirks Mode still look reasonable because their content is laid out and rendered in a way that aims to represent a "best effort," rather than being "pedantically correct." Firefox determines which mode to use by checking first the HTTP Content-Type, then the DOCTYPE of the page. Pages with Content-Type application/xhtml+xml or text/xml are rendered in standards compliance mode. Unlike Internet Explorer, Firefox always follows the HTTP Content-Type's instructions.

Finally, the General tab provides a list of the <meta> content tags used in the Web page, presenting this information in a more readable format than is available through the HTML source.

The Forms Tab

The Forms tab is an interesting case: it shows the details of forms and form fields in the Web page. Figure 7.5 shows the Forms information displayed for Google's home page.

Figure 7.5. Displaying the Forms tab for Google.com.

The top listbox identifies the forms in the page; the bottom listbox shows the form fields contained in the form selected in the top listbox.

Note
If the page doesn't contain any forms, this tab will be empty.

This display is extremely convenient in instances in which you need to verify the field names contained in a form, and the values of hidden form fields. It provides the information in a format that's much more digestible than the alternative: HTML "tag soup."

The Links Tab

The Links tab lists all the links contained in the Web page. The list includes the usual hyperlinks as well as links to style sheets, and any links that specify related meta information (These are tags of the form: <link rel="linkName"/>). Figure 7.6 shows a sample report.

Figure 7.6. Displaying information about links on sitepoint.com.

This display also lets you view each link's target, which identifies whether or not the link will open in a new page, and each link's access key, which is the keystroke that causes navigation for that link. You can display the Access Key column by clicking the small button in the Page Info window's top-right corner, and checking the Access Key item in the dialog box that results. A list of access keys is very useful to those developing accessible Web pages, as it allows us to see, at a glance, if any links lack access keys, and if any access key is assigned to more than one link.

The Media Tab

The Media tab holds detailed information about all the media files (not just image files) embedded in a given Web page—even background images and favicons. You can view each media file's title attribute, as well as its alternate text. To enable the Alternate Text column, click the button in the window's top-right corner, and check Alternate Text, as shown in Figure 7.7.

Figure 7.7. Reviewing information about media files on sitepoint.com.

Displaying the alternate text for media files makes it easy to identify images for which the alt attribute is not specified, and remedy the situation. This is especially handy if, for some reason, you can't use online validators such as Bobby. It's also a good way to check that a page of good quality hasn't been damaged by small changes you've just made.

Another useful feature of the Media tab is that it gives you the ability to view and save media files. Simply select a given media file from the list, and a nice little preview of it appears, along with a Save As… button that lets you save the file. Sometimes, this is the only way to access an embedded media file, such as a Flash applet, that you want to save.

The Security Tab

The Security tab provides security-related information about a Web page. On a normally delivered Web page—one that's not sent via HTTPS (secure HTTP)—the Security tab will tell you that the identity of the Web site cannot be verified, and that it does not support encryption. On securely delivered pages, however, the Security tab shows you whether the Website is verified (by its certificate), and identifies the type of encryption the page uses to protect any transferred data. Figure 7.8 shows that information for Google.com.

Figure 7.8. Accessing encryption details via the Security tab.

This is the only way to access the encryption details for secure HTTP. For peace of mind, it's worth checking these details if your page—or your site—needs to integrate with some other site, such as a payment processing facility.

Popup Cookie Tracking

You may find it necessary to set a cookie in the user's browser. Naturally, you test the cookie by surfing through the matching Web pages and verifying that they're working as intended. Perhaps you print debug messages when cookies are set, so that you can see what's going on. Wouldn't it be nice if you could confirm whether cookies are set without having to add temporary diagnostic code? Firefox allows you to do just that.

To get this functionality working, go to Tools > Options > Privacy, and expand the resulting tab's Cookies section (if it isn't already expanded). Select Ask me every time from the Keep Cookies: dropdown, and click OK.

Now, surf to a Web page that sets a cookie: any Web-based email service should do the trick, as will the Internet Movie Database. Firefox will inform you that a cookie is being set, and if you click Show Details, you'll be able to access specific information about the cookie, from its name and value, to its expiry date. This information is absolutely invaluable for those debugging cookie- and session-based Websites. Figure 7.9 shows the details that Firefox reports for Google.com.

Figure 7.9. Firefox reporting that Google.com wants to set a cookie.

Stretch the window to see the whole cookie value, if it's too long to fit in the default display.

Once the cookie is accepted—click Allow to make that happen—you can easily recall it later. To view the set of currently held cookies, use the options buried behind Firefox's menus, as discussed in Chapter 3, Revisiting Web Pages. For cookies, access Tools > Options > Privacy > Cookies > View Cookies. On Linux, start with Edit > Preferences; on Mac OS X, start with Firefox > Preferences.

Viewing cookie details as they're set is something of a "divide and conquer" strategy for debugging Web pages. It allows you to handle problems one at a time, rather than have your cookie problems mixed up with the other issues on the page. You can worry about scripts that manipulate page content in response to cookie values after you've confirmed that the cookies themselves are in good order.