Scroll into view lets you quickly reposition the viewport so that you can see the node. For example, suppose that you scrolled to the bottom of the page, and you're interested in the node at the top of the page. When viewing the DOM Tree, sometimes you'll find yourself interested in a DOM node that's not currently in the viewport. Press the Down arrow key 2 times so that you've re-selected the list that you just collapsed. In this case it's the node containing the instructions for step 1. Right-click Ringo below and select Inspect. Once you've selected a node in the DOM Tree, you can navigate the DOM Tree with your keyboard. See Get Started With Viewing And Changing CSS. Inspecting a node is also the first step towards viewing and changing a node's styles. Now, Tokyo is highlighted in the DOM Tree. Michelangelo is highlighted in the DOM Tree.Ĭlick the Inspect icon in the top-left corner of DevTools. Right-click Michelangelo below and select Inspect. When you're interested in a particular DOM node, Inspect is a fast way to open DevTools and investigate that node. The DOM Tree of the Elements panel is where you do all DOM-related activities in DevTools. See Appendix: HTML versus the DOM for an explanation. This tutorial assumes that you know the difference between the DOM and HTML. Complete these interactive tutorials to learn the basics of viewing and changing a page's DOM using Chrome DevTools.