Handling Web Pages with Scripts

These topics illustrate the concept of handling a web page and controlling its components using scripts. This concept of control can be achieved by using the Developer tools in a Web browser.

Download the sample web pages here.

Developer Tools Overview

The Developer Tools feature of a Web browser enables you to review the browser's internal representation of a web page. You can use the Developer Tools for a variety of tasks, including (but not limited to) viewing individual attributes, determining why a CSS rule is applied to an individual element, and previewing different document compatibility modes. By exposing how the browser interprets a web page, the Developer Tools provide many opportunities to research and resolve problems and do it faster than has been possible with previous versions of browsers.

These topics were prepared with Internet Explorer and include references to other browsers.

Using Developer Tools

Open any web page and press F12 on your keyboard to open the tools. If your keyboard doesn't have this function key, you can use the Tools menu.

There are eight distinct tools, each with their own tab in the F12 tools interface. We will describe and use the DOM Explorer and Console Tools for a couple of typical development or debugging tasks.

For Internet Explorer

For Google Chrome

For Mozilla Firefox