70 %
Chris Biscardi

Selecting html elements using the inspector to use in the Chrome console

Given an html tree like this on a webpage in Chrome's inspector:

<progress value="0" max="100" class="css-1b3f1gi">70 %</progress>
<h1 class="css-mexou">Party Corgi Podcast sketchfile</h1>

You can click on each element to place it in a stack of elements to access in the console. For example, if we click on <progress>, <h1>, and then <svg> we can access them in the console using $n syntax as such:

19:36:39.560 $0
19:36:39.571 <svg xmlns=​"http:​/​/​www.w3.org/​2000/​svg" fill=​"none" viewBox=​"0 0 500 510" class=​"css-1hyfx7x">​…​</svg>​
19:36:41.295 $1
19:36:41.298 <h1 class=​"css-mexou">​Party Corgi Podcast sketchfile​</h1>​
19:36:43.658 $2
19:36:43.660 <progress value=​"0" max=​"100" class=​"css-1b3f1gi">​70 %​</progress>​

Note that the last element we clicked on is the lowest number. So the <svg> pops up at $0.

If we wanted the offsetTop of the <h1> tag, we could do it as such given the previous clicks: