Como usar o inspetor da web do Chrome para visualizar o código flutuante

99

Usar o inspetor da web do chromes para visualizar o código é muito útil. Mas como você vê, por exemplo, o código de foco de um botão? Você terá que passar o mouse sobre o botão e, portanto, não poderá usá-lo (mouse) no inspetor. Existem atalhos ou outras maneiras de fazer isso no inspetor?

css  google-chrome  google-chrome-devtools  web-inspector 
— Bo.
fonte
2
Não é uma duplicata disso? stackoverflow.com/questions/4515124/…
— Mixologic
— TylerH

Respostas:

156

Agora você pode ver as regras de estilo da pseudoclasse e forçá-las nos elementos.

Para ver as regras como :hoverno painel Estilos, clique no pequeno botão da caixa pontilhada no canto superior direito.

Para forçar um elemento a entrar no :hoverestado, clique com o botão direito nele.

Como alternativa, você pode usar o painel da barra lateral Pontos de interrupção do listener de eventos no painel Scripts e selecionar para pausar nos manipuladores de mouseover.

— Travis Northcutt
fonte
1
No Chrome 48 (e perh anterior), essa caixa pontilhada foi substituída por um ícone de alfinete que diz Alternar estado do elemento quando você passa o mouse sobre ele. Em seguida, você seleciona "pairar" na lista suspensa.
— sameers
15

Como alternativa, você pode usar o painel da barra lateral Pontos de interrupção do listener de eventos no painel Scripts e selecionar para pausar nos manipuladores de mouseover.

— Yury Semikhatsky
fonte
6

É um pouco chato, mas você precisa clicar com o botão direito do mouse no elemento e, em seguida, mantendo o mouse sobre o link, use o teclado para selecionar o link 'Inspecionar Elemento' e pressione Enter. Isso deve mostrar o css para a pseudo classe de foco do elemento selecionado.

Esperamos que eles tornem isso um pouco mais fácil em compilações futuras.

— purpletônico
fonte
É bom saber, mas sim, é muito frustrante que o mouse precise ficar pairando sobre o link ... mesmo enquanto você vasculha a janela Inspecionar elemento usando apenas o teclado. O que é um incômodo!
— Chad Schultz
O real todo o processo de forçar o elemento de :hoverestado, ( as in the accepted answer), é também alcançada Via direito-clique sobre o elemento,> Inspecionar e manter o ponteiro lá, e depois usar as teclas do teclado para verificar o código pseudo .. Obrigado por este trabalho alternativo .... Portanto, não é realmente um incômodo !
— :)
1

Não tenho certeza se entendi bem sua pergunta, mas se você quiser ver o código do manipulador de eventos, pode apenas inspecionar o elemento e olhar o painel da barra lateral de Ouvintes de Eventos do Painel de Elementos. Outra maneira é pressionar o botão de pausa no Painel de Scripts e simplesmente passar o mouse sobre o elemento. O depurador irá parar na primeira instrução do primeiro manipulador de eventos.

— Loislo
fonte
Você poderia ser um pouco mais específico sobre como fazer isso? Um caso típico seria um botão de que gosto e quero ver como o efeito de pairar é realizado da mesma maneira fácil que a inspeção comum.
— Bo.
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.