Clique com o botão direito do mouse no texto do elemento e clique em "Rolar para o modo de exibição".
Eu tenho uma página muito grande. Estou encontrando elementos procurando por seu nome de classe na seção de elementos do DevTools. Depois, preciso encontrar o elemento selecionado no inspetor na página, mas o tamanho da página dificulta isso.
Existe uma maneira, uma vez que você selecionou um elemento no inspetor de saltar para a sua localização na página?
A resposta de Daniel provavelmente é a abordagem mais direta e que eu usaria se estivesse realizando essa tarefa de vez em quando, mas com um pouco de proeza em Javascript podemos executar isso no console, porque não?
Na janela do console do Chrome Dev Tools, digite o seguinte e pressione ENTER
:
document.getElementsByClassName('ClassName')[0].scrollIntoView(true);
Explicação:
document.getElementsByClassName('ClassName')
recupera todos os elementos que têm o nome da classe que você está procurando.
O [0]
é o índice que você usará para acessar os itens na coleção de elementos que foram recuperados. Como essa é uma matriz baseada em zero, [0]
obtém a primeira instância do nome da classe que você está procurando.
Finalmente, scrollIntoView(true)
faz exatamente o que diz, surpreendentemente, rolando o elemento, que neste caso é o primeiro elemento que tem o nome da classe "ClassName", em exibição. O argumento true
que é passado informa ao método para alinhar o elemento com o topo da janela. false
iria alinhá-lo ao fundo.
Então, se você se encontrar repetindo essa tarefa para uma página grande, como você diz, você pode executar essa função uma vez, pressionar UP
na janela do console, alterar o índice, lavar e repetir. Assim:
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
Espero que isso ajude.
Outro truque que inclui os postadores anteriores responde:
Se você trabalhar com o console e consultar elementos da linha de comando, $[0]
exibirá o último elemento consultado. Você pode clicar com o botão direito sobre ele e escolher reveal in elements panel
e, em seguida, terminar rolando para a visualização.
Ele fornece muita sanidade em páginas grandes.