4

I have a very large page. Im finding elements by searching for their class name in the elements section of the DevTools. I then need to find element ive selected in the inspector on the page, but the size of the page makes this difficult.

Is there a way once you've selected an element in the inspector of jumping to its location on the page?

3 Answers 3

5

Right-click on the element text, click "Scroll into View".

1
  • This menu item does not seem to appear for local pages (HTML pages stored on my hard disk, that I open with Chromium). Any idea why and how to enable it for those? Or can it possibly due to the absence of Javascript on that page? Mar 24, 2020 at 12:00
3

Daniel's answer is probably the most straightforward approach and one that I would use if performing this task once in a while, but with a little Javascript prowess we can execute this in the console, because why not?

In the Console window of Chrome Dev Tools enter the following and press ENTER:

document.getElementsByClassName('ClassName')[0].scrollIntoView(true);

Explanation:

document.getElementsByClassName('ClassName') retrieves all elements that have the class name you are looking for.

The [0] is the index you'll use to access the items in the collection of elements that were retrieved. Because this is a zero-based array, [0] gets you the first instance of the class name you're looking for.

Finally, scrollIntoView(true) does exactly what it says, surprisingly, by scrolling the element, which in this case is the first element that has the class name of "ClassName", into view. The true argument that is passed in tells the method to align the element with the top of the window. false would align it to the bottom.

So if you find yourself repeating this task for a large page, as you say you are, you could execute this function once, press UP on the console window, change the index, rinse wash and repeat. Like so:

document.getElementsByClassName('ClassName')[0].scrollIntoView(true); //First item
document.getElementsByClassName('ClassName')[1].scrollIntoView(true); //Second item
document.getElementsByClassName('ClassName')[2].scrollIntoView(false); //Third item, aligned to the bottom of the screen

Hope this helps.

0

Another trick that includes the previous posters answer:

If you work with the console, and query elements from the command line, $[0] will pull up the last queried element. You can the right click on it and choose reveal in elements panel, and then finish by scrolling into view.

It provides gobs of sanity on large pages.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .