我的页面非常大。我通过在 DevTools 的元素部分中搜索元素的类名来查找元素。然后我需要在页面的检查器中找到我选择的元素，但页面的大小使这变得很困难。
一旦您在检查器中选择了一个元素，是否有办法跳转到其在页面上的位置？
答案1
右键单击元素文本，单击“滚动到视图”。
答案2
丹尼尔的回答可能是最直接的方法，如果我偶尔执行这个任务的话我会使用这种方法，但是只要有一点 Javascript 能力，我们就可以在控制台中执行它，为什么不呢？
在 Chrome Dev Tools 的控制台窗口中输入以下内容并按ENTER：
document.getElementsByClassName('ClassName')[0].scrollIntoView(true);
解释：
document.getElementsByClassName('ClassName')检索具有您所寻找的类名的所有元素。
是[0]您用来访问已检索元素集合中的项目的索引。由于这是一个从零开始的数组，因此[0]可获取您要查找的类名的第一个实例。
最后，scrollIntoView(true)令人惊讶的是，它确实按照说明执行操作，将元素（在本例中是第一个具有类名“ClassName”的元素）滚动到视图中。true传入的参数告诉该方法将元素与窗口顶部对齐。false将使其与底部对齐。
因此，如果您发现自己正在为一个大页面重复此任务，正如您所说的那样，您可以执行此功能一次，按下UP控制台窗口，更改索引，冲洗并重复。像这样：
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
希望这可以帮助。
答案3
另一个技巧包括先前海报的答案：
如果您使用控制台并从命令行查询元素，$[0]将拉出最后查询的元素。您可以右键单击它并选择reveal in elements panel，然后通过滚动到视图中完成。
它在大页面上提供了大量的理智性。