Google Chrome Developer Tools: Elements Panel

Ryan Boudreaux offers a detailed look at how you can use the Google Chrome developer tools' Elements Panel to study and experiment with code on websites of your choice.

Google Chrome happens to be one of my favorite browsers at the moment, and it also has a clever set of developer tools. One that I have been using on a regular basis is the "Inspect Element" tool. But what I like most about the developer tools is the ability to look under the hood of any website for reviewing the code, the HTML and associated files, including scripts and style sheets. The entire developer tool set includes the Elements Panel, Resources Panel, Network Panel, Scripts Panel, Timeline Panel, Profiles Panel, Audits, and Console. This piece will highlight the Elements Panel, and future pieces will review the remaining panels.

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 (Figure A), 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.

Figure A

Click to enlarge images.
The DOM Elements Tree, including its inline scripts and styles, are syntax highlighted; for example, when I select the <div id="main-body"> tag, I get this view as displayed in Figure B below.

Figure B

Selecting any tag under the elements panel will take you to its associated styles, metrics, and properties, included but not limited to tags such as <p>, <div>, and classes as well. One nice way to look under the hood is to select a class or id anchor attribute; for example, in the Google Code website, I selected the <div id="gc-topnav"> and in Elements panel view, I can see what the Matched CSS Rules that define the attribute are. As displayed in Figure C, we can determine that font-size is 1em, margin equals zero, padding is .1em, 0, and so on.

Figure C

While it's great to see the individual styles and where they originate, it's also very helpful to see the final set of styles after they are computed and applied to the element. You can view the final product by selecting the Computed Style section and explore styles as rendered in the browser. While the Computed Style is unable to be edited, the Matched CSS Rules are able to be modified.

Update on the fly

Another cool feature is that you can modify any of the code, style sheets, or scripts on the fly with in place script editing, giving you a review of the modifications on the client level running in Google Chrome. This gives you a nice way to see how other websites are built, and also gives you a great way to tweak your own sites. Therefore, this integrated environment allows for debugging, optimizing, and understanding a web application, or website. So, let's take a look at some of the panel tools to peek under the hood of several websites.

Now, let's say you want to see what happens with the styling when you disable or modify a property. From the Matched CSS Rules you can disable any of the properties by deselecting the green check box, as shown in the example below in Figure D, where the margin has been disabled for the class="g-unit g-first" results in the News and Announcements sections, dropping below the Featured Products section of the page.

Figure D

Remember, you are only modifying the local file in your browser; you are not making updates to the actual web site; I just wanted to put that out there, as it seems there was some confusion by several folks about this function from several online boards and forums. The benefits of looking under the hood and making on-the-fly modifications allows you to study and learn how others are coding and styling the look and feel for their online content.

You can also double-click any non-user-agent style property to edit or delete; for example, double-click the float: left; property. You should see something like this as displayed in Figure E.

Figure E

Typing, or pasting in, one or more properties adds the new properties to the style rule. If you edit a style property value with a number, you can use the Up or Down arrow keys to change the number, and holding the Alt/Option key steps in increments of 0.1; holding the Shift key steps in increments of 10. You can also add more properties by double-clicking any white space to the left or below any existing entries or via pasting multiple properties separated by a semicolon. You can edit the style selector names via double-clicking their names, and you can also add new style selectors using the Gear Menu, located to the right of the Styles section bar as displayed in Figure F below.

Figure F

Metrics box model

This allows you to edit any of the absolute, relative, or fixed CSS box model metrics as displayed on the right side panel, and the example is displayed in Figure G below.

Figure G


Select the Properties pane from the right side panel, and then expand Element to expose the DOM properties, where you can modify and play around more under the hood with properties such as blur, constructor, focus and others as displayed in Figure H below.

Figure H

Event listeners

The Event Listeners are shown for the selected nodes and are in the order in which they are executed and captured during the rendering, and are separated by type. If a node has both onclick and onmouseover listeners for instance, they will appear in different sections. Filter preferences can also be set from the Gear menu, and you can choose to see only the listeners registered on the selected node, or the entire event flow. An example of the click and document events as displayed in Figure I below.

Figure I

Search function

You can also search within the Elements Panel for any code, tags, ids, classes, and scripts on which you may want to focus your attention -- even create a search list of high priority matches that you need to get to in a quick fashion. For example, typing "form" into the search box, results in 10 matches, and highlights the first instance as displayed in Figure J below.

Figure J

The Elements panel also supports XPath and CSS selectors as queries in the search box, in addition to the plain text demonstrated above.

The next installment on Using Google Chrome Developer Tools will review the Resources Panel.