Consulte: estado de foco nas Ferramentas do desenvolvedor do Chrome


855

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?


Boa pergunta, porque eu estava procurando como editar o estilo de focalização no Firebug - veja aqui stackoverflow.com/questions/5389245/… #
4911 Chris Halcrow

1
Sei que não é uma solução completa / perfeita para o problema, mas não consegui encontrar uma solução nas respostas que funcionariam para eventos de mouseover. O uso do Safari permite que você passe o mouse enquanto usa as ferramentas do navegador. Portanto, apenas para esse problema, considere usar outro navegador.
the12

Respostas:


1256

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.

Alternar estado do elemento

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

Estado do elemento de força

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


3
Não tenho certeza de quando isso foi alterado, mas agora você pode clicar com o botão direito do mouse -> forçar o estado do elemento (no painel de elementos) em outros elementos (não apenas nos <a>elementos) agora.
Travis Northcutt

3
Isso funciona para CSS: mudanças de foco, mas não se você fizer alterações ao passar usando JS.
matthew_360

Aqui está um vídeo rápido eu joguei junto demonstrando a: estado de foco no Chrome 59 se isso ajuda qualquer um youtu.be/Bklz3lGTFi8
RoccoB

54

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

Isso foi um pouco complicado, mas aqui vai:

  • 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.


32

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');

Forçando o cursor do mouse ou o mouse nas dicas de ferramentas do Bootstrap


Esta é a melhor resposta
Argun

20

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

Método 01

insira a descrição da imagem aqui

Método 02

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

Com Firebug

insira a descrição da imagem aqui


9

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:
clique nos três pontos brancos

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


4

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. ...


Ótima investigação. Estou usando a versão mais recente do desenvolvedor (10.0.612.3), então esperarei um pouco e espero ver: pairar no céu!
Ben

4

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

Desencaixar as Ferramentas do desenvolvedor do Chrome

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.

Passe o mouse sobre o elemento

  • 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!


1
Vou adicionar um comentário para que eu possa encontrá-lo novamente, porque sei que vou precisar! Especialmente importante para plugins imprevisíveis de UI de terceiros.
cfranklin 18/02

3

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).


2

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

3) Selecione o ícone de alfinete insira a descrição da imagem aqui (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!


1

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.


1
Você não precisa manter o mouse em estado de foco
Zachary Kniebel

1

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.


0

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.

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.