Knowing how to see what has changed on the page is paramount; View | Source will not help us. The source that is displayed by any browser (View | Page Source in Firefox), is loaded only once when the page is requested. Any changes we make dynamically to the Document Object Model (DOM) are tracked by the DOM but the original page source itself is not updated.
Download the Firefox "Add-on", Firebug. This option is available from the Tools menu in Firefox. Search for "Firebug" and download the add-on, install it, and restart the browser.
1. Create a test page using the code below.
2. Right-click the DIV
#canvas
. Be sure to click the words that make up the HTML of the DIV: Right click here and choose "Inspect Element". Right-clicking the HTML of that DIV tells Firebug which element in the DOM to inspect.3. While watching the Firebug HTML panel, click
#go
represented by the text Once Firebug is inspecting the DOM...