The last sentence is highlighted in the DOM Tree.Īs mentioned above, the Search bar also supports CSS and XPath selectors. The Search bar opens at the bottom of the DOM Tree. You can search the DOM Tree by string, CSS selector, or XPath selector.

Check Settings > Preferences > Elements > Show rulers on hover.

Press Control+ Shift+ P or Command+ Shift+ P (Mac) to open the Command menu, type Show rulers on hover, and press Enter.

With rulers above and to the left of your viewport, you can measure the width and height of an element when you hover over it in the Elements panel. The instructions continue there.Īfter completing the instructions at the bottom of the page you should jump back up to here. Go to the Appendix: Scroll into view section at the bottom of this page. Right-click Magritte below and select Inspect. 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 3 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. Raphael The Elements panel of DevTools opens.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.

Cursor changer chrome web store