css usar Veja: estado de foco nas Ferramentas do desenvolvedor do Google Chrome




exibir erros javascript chrome (10)

Eu quero ver o estilo :hover para uma âncora na qual eu estou navegando no Chrome. No Firebug, há um menu suspenso que me permite selecionar estados diferentes para um elemento. Não consigo encontrar nada semelhante no Chrome. Estou esquecendo de algo?


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

Método 01

Método 02

Com portagem padrão do desenvolvedor do Firefox

Com Firebug


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

Para ver as regras como :hover o :hover no painel Estilos, clique no texto small :hov no canto superior direito.

Para forçar um elemento a entrar :hover estado de :hover , clique com o botão direito do mouse.

Dicas adicionais sobre o painel "Elementos" nos atalhos das Ferramentas do desenvolvedor do Chrome .


Eu não acho que há uma maneira de fazer isso. Enviei uma solicitação de recurso . Se houver um jeito, os desenvolvedores do Google vão mostrar isso e eu vou editar minha resposta. Se não, teremos que esperar e assistir. (você pode estrelar a questão para votar a favor)

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

(a partir deste post) versão do canal atual estável é 8.0.552.224.

Você pode substituir a instalação do canal Stable do Google Chrome com o canal Beta ou o canal Dev (consulte Canais de liberação antecipada de acesso ).

Você também pode instalar uma instalação secundária de chrome que esteja ainda mais atualizada do 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 compilação Canárias pode, às vezes, 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. ...


Mudar para passar o status no Chrome é muito 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ê gostaria de inspecionar no DOM

3) Selecione o ícone do pino (Estado do elemento de alternância)

4) Em seguida, marque o cursor

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


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

No painel Elements , clique no botão de Toggle Element state e selecione :hover .

No painel Scripts , vá para Event Listeners Breakpoints na seção inferior direita e selecione Mouse -> mouseup .

Agora inspecione o Menu e selecione a caixa desejada. Quando você soltar o botão do mouse, ele deverá parar e mostrar o estado de foco do elemento selecionado no painel Elements (veja a seção Styles ).


Acho que isso não é mais um problema no Chrome, mas apenas no caso. Eu escrevi este script jQuery para inspecionar o DOM quando eu me movo com a 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 fizer algo em um elemento que deseja interromper.


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

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


Eu pude ver o estilo seguindo os passos abaixo sugeridos por Babiker - "Clique com o botão direito do mouse no elemento, mas não mova o mouse para longe do elemento, mantenha-o em foco. Escolha inspecionar elemento via teclado, como na seta para cima e em seguida, digite a chave. "

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


No meu caso, eu quero dubug toolstrip bootstrap. Mas os métodos acima não funcionam para mim. Eu acho que bootstrap implementado isso por algo como o mouse in / out evento.

De qualquer forma, quando eu passar um botão, ele irá gerar um elemento irmão html abaixo do botão, então eu seleciono o elemento pai do botão na aba "Elements" da janela "Developer tools", passe o botão e "Ctrl + C", então eu posso colar o código-fonte que contém o código gerado. Por último, encontre o código gerado e adicione-o ao código-fonte por "Editar como HTML" na guia "Elementos".

Espero que possa ajudar alguém.


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 mova o ponteiro do mouse para longe do elemento, mantenha-o em estado de foco.
  • Escolha inspecionar elemento via teclado, como na seta para cima e depois na tecla Enter.
  • Procure nas ferramentas do desenvolvedor, em Regras de CSS correspondentes, você poderá ver: hover.

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







google-chrome-devtools