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:

  • Internet Explorer, Firefox: Right-click on the window and select View Source.

  • Safari: Ctrl-click on the window and select View Source.

  • Opera: Right-click on the window and select Source.

Figure 1.1. View Source (Firefox)

View Source (Firefox)

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

  • It’s okay to copy and alter a site’s source for learning purposes on your home machine, but don’t post any such material on your public website. This goes for both the text on the site and the underlying code or design.

  • Most sites on the web have terrible underlying code. Learning how to code by randomly viewing websites is like learning how to compose verse by randomly reading poetry written by kids. You might encounter some brilliant stuff… but the odds are pretty low. Never assume that just because BigFamousWebsite.com coded their home page a certain way, that this was the best way to do it.

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:

  • Internet Explorer: Right-click on the window and select Save Picture As…

  • Firefox: Right-click on the image and select Save Image As… to save the image as a file, View Image to view the image by itself in the browser, or Properties to view the image’s file size and other properties.

  • Safari: Ctrl-click on the image and select Save Image to the Desktop to save the image as a file or Open Image in New Window to view the image by itself in the browser.

  • Opera: Right-click on the image and select Save Image… to save the image as a file, Open Image to view the image by itself in the browser, or Image properties to view the image’s file size and other properties.

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:

  • Internet Explorer: Right-click on the window and select Properties.

  • Firefox: Right-click on the window and select View Page Info.

  • Opera: Select Tools | Appearance | Panels, check the Info checkbox, and click OK.

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.

Last updated August 03, 2014 at 1:42 am. © 2001 – 2014 by Evan Goer