Browser Tools

A browser’s primary function is to display web pages. However, for a web developer, browsers are much more useful than that. Whenever you visit a web page, your browser fetches a tremendous amount of valuable information, such as the HTML source of the page, image files that appear on the page, and other associated files. This section describes how to use your browser to retrieve that information.

Note

Since browser makers love to change the names and locations of these functions from version to version, the instructions below might not apply if you’re using a different browser version than the one tested at the time this section was written.

View Source

By far the most valuable browser tool is View Source, which displays the HTML source of the page. Viewing source is one of the fastest ways to learn how to code. If you’re not sure how some feature of HTML works, you can view the source of a site that uses the feature, copy and paste sections of code, make alterations, and see what happens. To view source:

Figure 1.1. View Source (Firefox)

View Source (Firefox)

Although viewing the source is incredibly useful, keep in mind these two caveats:

Save Images

Another invaluable browser function is the ability to save image files. Every time your browser visits a web page, it also downloads all the images that display on the page. You can save these files and reuse them for educational purposes. To save an image:

As with View Source, you should never take someone else’s images, altered or unaltered, and post them on a public site unless you have permission. There are numerous free image repositories all over the web, where you can get clip art, backgrounds, and photos that are either in the public domain or offered under reasonably liberal licenses.

View Page Info

The View Page Info function provides secondary technical information about the page, such as the page size in bytes and the text encoding. This information might not seem all that useful when you’re first starting out, but it’s invaluable for more advanced coders. To view page info:

Figure 1.2. View Page Info (Firefox)

View Page Info (Firefox)

The information displayed varies from browser to browser. Firefox provides more useful information than Internet Explorer, including a full list of all images on the page (with height, width, and size in bytes). Opera takes an interesting approach: if you activate the Info panel, you can view this information alongside each page you browse to. Opera also provides a shortcut (Ctrl-J) for displaying all the links on the page.