Salta para a posição do elemento na página do inspetor de elementos do Chrome DevTools?

1

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?

    
por Evans 18.03.2014 / 18:16

3 respostas

2

Clique com o botão direito do mouse no texto do elemento e clique em "Rolar para o modo de exibição".

    
por 18.03.2014 / 18:21
2

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.

    
por 29.08.2014 / 20:15
0

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.

    
por 19.03.2014 / 00:25