Comment déboguer CSS/Javascript passez questions

Question

Je me retrouve souvent à vouloir déboguer le code CSS de mise en page des questions qui impliquent des DOM changements causés par Javascript en réaction à un hover événement ou d'une autre feuille de style CSS règles applicables en raison de l' :placez le sélecteur.

Normalement, je voudrais utiliser Firebug pour inspecter l'élément qui me fait mal et de voir quelles sont ses propriétés CSS ont été, et où ces propriétés viennent. Toutefois, lorsque le curseur est en cause, il devient impossible, parce que dès que vous déplacez votre souris vers le bas pour le panneau Firebug, les éléments qui vous intéressent ne sont plus planait, les règles CSS qui s'appliquent sont différentes, et (dans le cas de JS plane) le DOM est changé.

Est-il possible que je peut "geler" l'état des DOM et de l'application de :hover dans le but d'inspecter les DOM comme il l'était lors d' un hover événement?

D'autres idées sur la façon de déboguer ce type de problème sont les bienvenus, bien sûr.

Answer 1

Vous pouvez le faire dans Firebug mais son un peu "buggy". Si vous inspecter l'élément, puis cliquez sur désactiver le html de l'onglet, l'onglet DOM par exemple, lorsque vous revenez à l'onglet html de style css onglet sur la droite aura une flèche de sélection déroulante où vous pouvez sélectionner le :hover état de cet élément d'actif. Suce pour avoir à changer d'onglet pour l'obtenir à montrer mais cela fonctionne pour moi.

Answer 2

Lors de l'inspection des liens, Firebug affiche de la CSS par défaut de l'état, c'est à dire des styles appliqués à un:lien. Par défaut, le :hover et :active les styles ne sont pas affichés. Heureusement, vous pouvez modifier l'état de la liaison en cliquant sur le Style et en choisissant l'option appropriée:

Answer 3

Ajouter un onmouseover fonction de gestionnaire de l'élément qui est en train de l' :hover. À l'intérieur de cette fonction, appelez - console.info(element) sur n'importe quel élément que vous souhaitez savoir sur.

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

Lorsque vous exécutez cette avec firebug active, l'élément sera disponible à inspecter dans la console de firebug.

Answer 4

Dans firebug, tandis que dans la vue HTML, regarder vers le panneau de droite et de trouver les "Styles" de l'onglet. Cliquez sur la flèche vers le bas et sélectionnez :hover.

Answer 5

Un peu de JavaScript (boîtes à outils, tels que le Dojo utiliser des classes CSS comme dijitButtonHover à un style plutôt :hover.

Si l'onglet Style :hover astuce ne fonctionne pas.

Au lieu de cela, vous pouvez droit-cliquez sur le Nœud (qui sont des classes CSS changement) dans l'onglet HTML, et "Pause" sur la Modification de l'Attribut"