css - usar - exibir erros javascript chrome




Veja: estado de foco nas Ferramentas do desenvolvedor do Google Chrome (8)

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


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


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


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 sei que o que eu faço é bastante a solução, no entanto, funciona perfeitamente e é assim que eu faço isso toda vez.

Então, continue assim:

  • Primeiro, verifique se as Ferramentas do desenvolvedor do Chrome estão desancoradas.
  • Em seguida, basta mover qualquer lado da janela do Dev Tools para o meio do elemento que você deseja inspecionar enquanto pairava.

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

Felicidades!


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!


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.







google-chrome-devtools