Practice: Inspecting DOM "Elements" using the Developer Console
As we continue to look at the DOM, this article contains an interactive tutorial to show how to view and interact with the DOM using the Developer Console. We are using the Chrome browser, but it will work the same in other browsers. This exercise does not count towards your grade. It is just for practice!
Before starting this tutorial:
- Collapse the left navigation pane on this page by selecting the
icon on the top left. - Next, you'll inspect the DOM elements on this page by displaying the Developer Console in your browser.
- The sequence is ctrl+shift+J on Windows and cmd+option+J on the Mac.
- Finally, select the Elements tab.
The tutorial demonstrates how to inspect the <ul> and <li> elements on the page, navigate the DOM tree using the keyboard, and inspect the properties of DOM objects. Close the Dev Console when you are finished with the tutorial.
We've used the console.log method to display messages in the Console panel of the Developer Console. The console.dir method displays the properties for a specific object. The JavaScript language uses this information to access and manipulate objects. This method is also useful when debugging an application.
This example shows how to view the “properties” and “methods” associated with the Document object such as BaseURI.
Console API reference
console.dir(object)
Log level: Info
Prints a JSON representation of the specified object.
console.dir(document.head);
Figure 4. The result of the console.dir() example above.