У меня очень большая страница. Я нахожу элементы, ища их имя класса в разделе элементов DevTools. Затем мне нужно найти элемент, выбранный в инспекторе на странице, но размер страницы затрудняет это.
Есть ли способ, когда вы выбрали элемент в инспекторе, чтобы перейти к его местоположению на странице?
Щелкните правой кнопкой мыши на элементе текста, нажмите "Прокрутить в вид".
Ответ Даниэля, вероятно, является наиболее простым подходом, и я бы использовал его, если бы выполнял эту задачу время от времени, но с небольшим мастерством 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
Надеюсь это поможет.
Еще одна хитрость, включающая ответ предыдущих постеров:
Если вы работаете с консолью и запрашиваете элементы из командной строки, $[0] вызовет последний запрошенный элемент. Вы можете щелкнуть по нему правой кнопкой мыши и выбрать « reveal in elements panel , а затем закончить, прокрутив изображение.
Это обеспечивает толерантность на больших страницах.