Перейти к позиции элемента на странице из инспектора элементов Chrome DevTools?

У меня очень большая страница. Im поиск элементов путем поиска их имени класса в разделе элементы DevTools. Затем мне нужно найти элемент, выбранный в инспекторе на странице, но размер страницы затрудняет это.

есть ли способ, как только вы выбрали элемент в инспекторе перехода к его местоположению на странице?

23
задан Evans
17.05.2023 7:02 Количество просмотров материала 2478
Распечатать страницу

3 ответа

щелкните правой кнопкой мыши на тексте элемента, нажмите кнопку "прокрутка в поле зрения".

2
отвечен Daniel Chateau 2023-05-18 14:50

ответ Даниэля, вероятно, самый простой подход, и тот, который я бы использовал при выполнении этой задачи время от времени, но с небольшим мастерством Javascript мы можем выполнить это в консоли, потому что почему бы и нет?

в окне консоли Chrome Dev Tools введите следующую команду и нажмите ENTER:

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

объяснение:

document.getElementsByClassName('ClassName') получает все элементы с именем класса, который вы ищете.

в [0] - индекс, который будет использоваться для доступа к элементам в коллекции извлеченных элементов. Потому что это массив на основе нуля,[0] получает вам первый экземпляр имени класса, который вы ищете.

наконец, scrollIntoView(true) делает именно то, что он говорит, Удивительно, прокручивая элемент, который в этом случае является первым элементом, который имеет имя класса "ClassName", в поле зрения. The 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

надеюсь, что это помогает.

2
отвечен user2692837 2023-05-18 17:07

еще один трюк, который включает в себя предыдущие постеры ответ:

Если вы работаете с консолью, и запрашивать элементы из командной строки $[0] вызовет последний запрошенный элемент. Вы можете нажать на нее правой кнопкой мыши и выбрать reveal in elements panel, а затем закончить прокруткой в поле зрения.

это обеспечивает уйму здравомыслия на больших страницах.

0
отвечен dgo 2023-05-18 19:24

Постоянная ссылка на данную страницу: [ Скопировать ссылку | Сгенерировать QR-код ]

Ваш ответ

Опубликуйте как Гость или авторизуйтесь

Имя
Вверх