Enterprise Software

Hands-on with the Google Chrome Development Tools

Elements Panel

The Elements panel of the Developer Tool lets you see everything in one DOM tree, and allows inspection of the DOM elements. I often visit the Elements tab when needing to identify the HTML snippet for a particular aspect of the page. The elements include the Computed Style, Styles, Matched CSS Rules, Metrics, Properties, DOM Breakpoints, and Event Listeners.

In this demonstration I will start with using the Model Railroad Hobbyist page, with the page open in Google Chrome, right-click anywhere on the page and select Inspect Element at the bottom of the dialog box. By default, the console panel will open to the Elements Panel. With the Elements Panel active, we can view the HTML code, select an element, and view its properties. In this case the metrics for the main content block show how it is read by the browser, the area selected also becomes indicated by the blue overtone in the top browser panel. This shows the page's HTML elements in the main pane, and styles, metrics, properties, and event listeners in the right-hand sidebar. This is very useful when you are curious about which part of the HTML generated a particular page element.

Note: This compilation gallery is made up of these original blog posts, which you can also view individually in the Web Designer blog:

About Ryan Boudreaux

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 g...