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
Isso responde sua pergunta? Veja: estado de foco nas Ferramentas do desenvolvedor do Chrome
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 !
:)
5

No Chrome:

Você também pode CTRL+SHIFT+Cpassar o mouse sobre um elemento e clicar para inspecionar esse elemento.

No Firefox:

insira a descrição da imagem aqui

no firebug:

insira a descrição da imagem aqui

fonte: https://stackoverflow.com/a/11272205/2165415

T.Todua
fonte
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.