Como as questões em foco de depuração CSS / JavaScript

Question

Muitas vezes eu me pego querendo problemas de layout de depuração de CSS que envolvem DOM alterações causadas pelo Javascript em reação a um evento de foco ou regras CSS diferentes aplicando devido ao:. Selector pairar

Normalmente, eu uso o Firebug para inspecionar o elemento que está me dando problemas e ver o que suas propriedades CSS foram, e onde essas propriedades vêm. No entanto, quando pairando está envolvido, torna-se impossível, porque assim que você mover o mouse para baixo para o painel de Firebug, os elementos que você está em interessado não são mais pairou, as regras CSS que se aplicam são diferentes, e (no caso de paira JS) do DOM é alterado.

Existe alguma maneira eu posso "congelar" o estado do DOM e aplicação de:? Pairar, a fim de inspecionar o DOM como era durante um evento em foco

Quaisquer outras ideias sobre a forma de depurar este tipo de problema são bem-vindos, claro.

Answer 1

Adicionar um manipulador de função onmouseover ao elemento que está tomando o :hover. Dentro dessa função, console.info(element) chamada em qualquer elemento que você gostaria de conhecer.

myHoverElement.onmouseover = function() {
    console.info(document.getElementById("someotherelementofinterest"));
};

Quando você executa isso com firebug ativo, o elemento estará disponível para inspecionar no console do Firebug.

Answer 2

Você pode fazer isso no Firebug, mas é um pouco "bugs". Se você inspecionar o elemento e, em seguida, clique fora a guia do html, para a guia DOM por exemplo, quando você voltar para a guia HTML na guia css "estilo" à direita terá uma queda de seta para baixo selector onde você pode selecionar o : estado suspenso desse elemento para ser activa. Suga ter que alternar guias para obtê-lo para mostrar, mas ele funciona para mim.

Answer 3

Ao inspecionar links, Firebug mostra o estado CSS padrão, ou seja, os estilos aplicados a um: link. Por padrão, o: hover e: estilos ativos não são mostradas. Felizmente, você pode alterar o estado do link clicando Estilo e escolhendo a opção apropriada:

Answer 4

No firebug, guia enquanto na vista HTML, olhar para o painel do lado direito e encontrar os "Estilos". Clique na seta para baixo e selecione :hover.

Answer 5

No Firefox (v33.1.1):

• Inspecionar elemento (Q)
• Na visão DOM clique direito no elemento
• selecione: hover,: ativa ou: foco na parte inferior do menu de contexto

Answer 6

Alguns toolkits JavaScript, como classes CSS uso Dojo como dijitButtonHover ao estilo, em vez de:. Pairar

Assim, a guia Estilo:. Truque pairar não trabalho

Em vez disso, você pode botão direito do mouse no nó (que é classes CSS mudar) na guia HTML, e "Quebra no Attribute Change"

Answer 7

No Chrome (versão 35):

• Inspecionar elemento
• No interior os elementos visualizador clique direito sobre o elemento.
• "elemento de estado Force" Select ->: ativa,: hover,: foco,: visited

Answer 8

para questões css, i encontrar desenvolvedor web plug-in de valor inestimável:

http://chrispederick.com/work/web-developer/

carregá-lo, então você tem 2 possíveis ferramentas à sua disposição.

1. css herdada de arquivos em qualquer moused-over elemento, uso shift-ctrl-y

2. css computadorizada (incuding qualquer estilo de linha = aplicada que não está em um arquivo CSS - ou através de um método de css do jquery etc) - pressione Shift-Ctrl-F

este último também retornar todas as classes aplicada ao elemento.

é claro que tem outros grandes usos, tais como, excelente depuração de formas, incluindo de edição de campos e biscoitos ocultos (que pode ser usado para testes de penetração)

Answer 9

Você também pode inspecionar esse elemento, em seguida, no estilo da guia deve haver uma pequena seta suspensa. Ela terá algo como "Show User Agent", "Expandir propriedades abreviadas", então deve haver 2 mais sob que (eu estou supondo que você está inspecionando algo que tem um estado de foco) :active e :hover selecionar o :hover e você deve ser de ouro.

Answer 10

Eu tive o mesmo problema e descobriu que, embora eu não poderia inspecionar pairar objetos no Firefox com Firebug, Web Inspector do Safari iria congelar o estado atual e permitir a inspeção. Para ativar inspetor web do Safari basta digitar a seguinte linha para o terminal e reinicie Safari:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Ativar o elemento em foco no navegador, em seguida, clique direito e selecione 'Inspect Element'. A página irá congelar em seu estado atual, permitindo que você para inspecionar os objetos fugazes para o conteúdo do seu coração.

Answer 11

Não há solução perfeita (mouseover / efeito hover-simulação) no Firebug.

No entanto, existem algumas maneiras de editar o seu estado de foco no Firebug:

1. Adicionar um estado :active, juntamente com o seu :hover

   a:hover, a:active { ... }

   Se você mouse para baixo em seu elemento, tragada e liberação, ele permanece ativo.

2. Vire o estado :hover em uma classe .hover

   Você pode editar a regra CSS clicando no arquivo de origem (na guia Estilo do Firebug)

   Então, é claro, que você adicionar (e remover) a classe .hover do seu elemento.

Answer 12

muitas vezes eu fazer algum CSS alternativo ou Javascript para "congelar" o meu evento pairou; ajustá-lo à perfeição com Firebug e colocar meu foco de volta no lugar.

Answer 13

Sim, você pode botão direito do mouse "Inspecionar elemento" quando provocando o estado hover. Isso funcionou para mim no Firebug e WebKit.

Answer 14

Eu sei que este post é um pouco velho, mas para aqueles que acham isso no Google, eu criei uma ferramenta cross-browser que permite visualizar seu layout HTML / CSS apenas movendo o mouse. Você pode visualizar facilmente elementos no seu estado hover.

HTML Box Visualizer - GitHub

Answer 15

Em versões mais recentes do Firefox (pelo menos V57 e acima), UI do inspetor é um pouco diferente do que quando as outras respostas foram postadas. Para habilitar e congelar o estado :active / :hover / :focus de um elemento, inspecioná-lo (clique direito -> Inspecionar elemento) e no Inspetor clique em:

Resultado:

Fonte (as imagens são licenciadas abaixo CC-BY-SA v2.5, A Mozilla Contribuintes)