Continuing with Google Chrome Developers Tools, this piece will demonstrate using the Console Panel to conduct debugging, inspect the DOM, or analyze any HTML errors for selected web pages. In previous posts on the Google Development toolkit, I introduced the Elements Panel and the Resource Panel.
In Google Chrome, select any page you wish to inspect; for this example, I will be demonstrating the Console using the Wikipedia.org website.There are several ways to open up the Google Web Developer Tools; the easiest way is to just right-click on any page element and select Inspect element, resulting in the display as shown below for the Wikipedia.org site; this is the docked view. If you wish to undock the tool, click the dock/undock icon at the bottom left of the tool (see Figure B).
Click images to enlarge.
Next, click the show Console button on the far right side of the toolbar. If there are any errors or warnings detected, they will be displayed in the bottom-right corner of the window. Clicking on any of these errors will also open the Console panel.The Console provides auto-completion and tab-completion; therefore, as you type expressions, property names are automatically suggested. If there are multiple properties with the same prefix, pressing the Tab key will allow you to cycle through the list. Pressing the right arrow key will accept the highlighted suggestion. The current suggestion is also accepted by pressing the Tab key if there is only one matched property. The Console panel supports all 21 functions provided in Firebug's Command Line API. Figure C shows the Console panel un-docked below.
Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal government.