70 %

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:

html

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

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:

$1.offsetTop