Consulte: estado de foco nas Ferramentas do desenvolvedor do Chrome

Quero ver o :hoverestilo de uma âncora em que estou passando o mouse no Chrome . No Firebug , há uma lista suspensa de estilos que permite selecionar diferentes estados para um elemento.

Não consigo encontrar nada parecido no Chrome. Estou esquecendo de algo?

Agora você pode ver as regras da pseudo classe e forçá-las aos elementos.

Para ver as regras, como :hoverno painel Estilos, clique no :hovtexto pequeno no canto superior direito.

Para forçar um elemento a entrar em :hoverestado, clique com o botão direito do mouse e selecione :hover.

Dicas adicionais sobre o painel de elementos nos Atalhos das Ferramentas para Desenvolvedor do Chrome .

EDIT: Esta resposta foi antes da correção do bug, veja a resposta do tnothcutt.

• Clique com o botão direito do mouse no elemento, mas NÃO afaste o ponteiro do mouse do elemento, mantenha-o no estado de foco.
• Escolha inspecionar o elemento pelo teclado, como na seta para cima e, em seguida, na tecla Enter.
• Procure nas ferramentas do desenvolvedor em Regras CSS correspondentes, você poderá ver: pairar.

PS: Eu tentei isso em uma das suas tags de pergunta.

Eu queria ver o estado de foco nas minhas dicas de ferramentas do Bootstrap. Forçar o estado: hover no Chrome dev Tools não criou a saída necessária, mas acionar o evento mouseenter via console fez o truque no Chrome. Se o jQuery existir na página, você poderá executar:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Existem várias maneiras de ver os estilos HOVER STATE nas Ferramentas do desenvolvedor do Chrome.

Método 01

Método 02

Com o pedágio de desenvolvedor padrão do Firefox

Com Firebug

Caso isso ajude, isso parece ser mais fácil no Chrome mais recente (47.0.2526.106):

Inspecione o elemento e clique nos três pontos brancos na calha esquerda:

Em seguida, escolha o estado do elemento desejado neste menu suspenso:

Eu não acho que existe uma maneira de fazer isso. Enviei uma solicitação de recurso . Se houver uma maneira, os desenvolvedores do Google o indicarão com firmeza e eu editarei minha resposta. Caso contrário, teremos que esperar e assistir. (você pode marcar com estrela o problema para votar)

Comentário 1 do membro do projeto Chrome : Na 10.0.620.0, o painel Estilos mostra os estilos: focalizar o elemento selecionado, mas não: ativo.

A versão atual do canal estável é 8.0.552.224.

Você pode substituir a instalação do canal estável do Google Chrome pelo canal beta ou pelo canal Dev (consulte Canais de liberação de acesso antecipado ).

Você também pode instalar uma instalação secundária do chrome que é ainda mais atualizada que o canal Dev .

... A compilação Canary é atualizada com mais frequência que o canal Dev e não é testada antes de ser lançada. Como a versão do Canary às vezes pode ser inutilizada, ela não pode ser definida como seu navegador padrão e pode ser instalada além de qualquer um dos canais acima do Google Chrome. ...

Sei que o que faço é uma solução alternativa, no entanto, funciona perfeitamente e é assim que faço sempre.

Então, proceda assim:

• Primeiro, verifique se as Ferramentas do desenvolvedor do Chrome estão desencaixadas.
• Em seguida, mova qualquer lado da janela Dev Tools para o meio do elemento que você deseja inspecionar enquanto estiver passando o mouse.

• Por fim, passe o mouse sobre o elemento, clique com o botão direito do mouse e inspecione o elemento, mova o mouse para a janela Dev Tools e você poderá brincar com seu elemento: hover css.

Felicidades!

Eu estava depurando um hoverestado de menu com o Chrome e fiz isso para poder ver o código do estado de foco:

No Elementspainel, clique no Toggle Element statebotão e selecione :hover.

No Scriptspainel, vá para Event Listeners Breakpointsa seção inferior direita e selecione Mouse -> mouseup.

Agora inspecione o menu e selecione a caixa desejada. Quando você solta o botão do mouse, ele deve parar e mostrar o estado de foco do elemento selecionado no Elementspainel (veja a Stylesseção).

Alterar para o status de pairar no Chrome é bastante fácil, basta seguir estas etapas abaixo:

1) Clique com o botão direito na sua página e selecione inspecionar

2) Selecione o elemento que você deseja que seja inspecionado no DOM

3) Selecione o ícone de alfinete (Alternar estado do elemento)

4) Em seguida, marque o cursor do mouse

Agora você pode ver o estado de foco do DOM selecionado no navegador!

Eu pude ver o estilo seguindo as etapas abaixo sugeridas por Babiker - "Clique com o botão direito do mouse no elemento, mas NÃO mova o ponteiro do mouse para longe do elemento, mantenha-o no estado suspenso. Escolha inspecionar o elemento pelo teclado, como na seta para cima e depois pressione a tecla Enter ".

Para alterar o estilo, siga as etapas acima e - Altere a guia do navegador pressionando ctrl + TAB no teclado. Em seguida, clique novamente na guia que você deseja depurar. Sua tela instantânea ainda estará lá. Agora, leve o mouse com cuidado para a área de ferramentas do desenvolvedor.

No meu caso, quero duplicar a dica da ferramenta de autoinicialização. Mas os métodos acima não funcionam para mim. Eu acho que o bootstrap implementou isso por algo como o evento mouse in / out.

De qualquer forma, quando passo o mouse sobre um botão, ele gera um elemento html irmão abaixo do botão, então seleciono o elemento pai do botão na guia "Elementos" da janela "Ferramentas de desenvolvedor", passe o mouse e pressione "Ctrl + C", então eu posso colar o código fonte que contém o código gerado. Encontre o código gerado pela última vez e adicione-o ao código fonte em "Editar como HTML" na guia "Elementos".

Espero que possa ajudar alguém.

Acho que isso não é mais um problema no Chrome, mas apenas por precaução. Eu escrevi esse script jQuery para inspecionar o DOM quando me movo pela tecla TAB.

Se alterado para usar 'mouseover', ficaria assim:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

Você pode modificá-lo facilmente para remover o manipulador de eventos sempre que clicar ou fazer algo em um elemento em que deseja parar.