web-dev-qa-db-fra.com

Comment déboguer les problèmes de survol CSS/Javascript

Je souhaite souvent résoudre les problèmes de mise en page CSS qui impliquent des modifications du DOM causées par Javascript en réponse à un événement de survol ou l'application de règles CSS différentes en raison du sélecteur: hover.

Normalement, j'utilisais Firebug pour inspecter l'élément qui me causait des problèmes et voir quelles étaient ses propriétés CSS et d'où elles venaient. Cependant, lorsque le survol est impliqué, cela devient impossible, car dès que vous déplacez votre souris vers le panneau Firebug, les éléments qui vous intéressent ne sont plus survolés, les règles CSS applicables sont différentes et (dans le cas contraire). de JS survole) le DOM est changé.

Est-il possible de "geler" l’état du DOM et d’appliquer: survolez afin d’inspecter le DOM tel qu’il était pendant un survol?

Bien entendu, toute autre idée sur la façon de résoudre ce type de problème est la bienvenue.

javascripthtmlcssfirebughover
70
Jason Creighton

Ajoutez un gestionnaire de fonction onmouseover à l'élément prenant le :hover. Dans cette fonction, appelez console.info(element) pour l’élément que vous souhaitez connaître.

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

Lorsque vous exécutez cette opération avec firebug actif, l'élément sera disponible pour inspection dans la console firebug.

22
Matt Bridges

Vous pouvez le faire dans Firebug mais c’est un peu "bogué". Si vous inspectez l'élément, puis cliquez sur l'onglet html, vers l'onglet DOM, par exemple, lorsque vous revenez à l'onglet html, l'onglet "style" css à droite aura un sélecteur déroulant fléché dans lequel : survolez l'état de cet élément pour qu'il soit actif. Suce d'avoir à changer d'onglet pour le montrer mais ça marche pour moi.

44
Neum

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

enter image description here

31
Subodh Ghulaxe

Dans Firebug, dans la vue HTML, examinez le panneau de droite et recherchez l'onglet "Styles". Cliquez sur la flèche vers le bas et sélectionnez :hover.

19
kelly johnson

Dans Firefox (v33.1.1):

  • Inspecter l'élément (Q)
  • Dans la vue DOM, cliquez avec le bouton droit sur l'élément.
  • sélectionnez: survol,: actif ou: focus au bas du menu contextuel
5
Maximilian Köhler

Dans Chrome (version 35):

  • Inspecter l'élément
  • Dans le visualiseur d'éléments, cliquez avec le bouton droit de la souris sur l'élément.
  • Sélectionnez "Forcer l'état de l'élément" ->: actif,: survol,: focus,: visité
3
xonya

Certaines boîtes à outils JavaScript, telles que Dojo, utilisent des classes CSS telles que dijitButtonHover pour styler plutôt que: hover.

Donc, l'onglet Style: l'astuce de vol stationnaire ne fonctionne pas.

Au lieu de cela, vous pouvez cliquer avec le bouton droit de la souris sur le nœud (les classes CSS modifiées) dans l'onglet HTML, puis sur "Interrompre le changement d'attribut"

3
Arlo

Vous pouvez également inspecter cet élément, puis sur le style de l'onglet, il devrait y avoir une petite flèche déroulante. Il aura quelque chose comme "Show User Agent", "Expand Shorthand Properties", alors il devrait y en avoir 2 de plus en dessous (je suppose que vous inspectez quelque chose qui a un état de survol) :active et :hover sélectionnez le :hover et vous devriez être d'or.

2
ramoneguru

pour les problèmes de CSS, je trouve le plugin de développement web inestimable:

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

chargez-le, vous avez 2 outils possibles à votre disposition.

  1. css hérité des fichiers sur n'importe quel élément survolé, utilisez shift-ctrl-y

  2. css calculé (y compris tout style en ligne = appliqué qui n'est pas dans un fichier .css - ou via une méthode .css de jquery etc.) - appuyez sur shift-ctrl-f

ce dernier renverrait également toutes les classes appliquées à l'élément.

bien sûr, il a d'autres utilisations intéressantes, telles que le débogage de formulaires, y compris l'édition de champs cachés et les cookies (qui peuvent être utilisés pour les tests d'intrusion)

2
Dimitar Christoff

J'ai eu le même problème et j'ai constaté que, même si je ne pouvais pas inspecter les objets survolés dans Firefox avec Firebug, Web Inspector de Safari gèlait l'état actuel et permettait l'inspection. Pour activer l'inspecteur Web de Safari, entrez simplement la ligne suivante dans le terminal et redémarrez Safari:

defaults write com.Apple.Safari WebKitDeveloperExtras -bool true

Activez l'élément survolé dans le navigateur, puis cliquez avec le bouton droit de la souris et sélectionnez «Inspecter l'élément». La page se fige dans son état actuel, ce qui vous permet d'inspecter les objets fugaces au contenu de votre coeur. 

1
Michael Sibley

Il n'y a pas de solution parfaite (effet mouseover/hover-simulation) dans Firebug.

Cependant, il existe plusieurs façons de modifier votre état de survol dans firebug:

  1. Ajoutez un état :active avec votre :hover

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

    Si vous faites glisser votre élément vers le bas, faites-le glisser et relâchez-le, il reste actif.

  2. Transformez l'état :hover en une classe .hover

    Vous pouvez éditer la règle CSS en cliquant sur le fichier source (dans l'onglet Style de Firebug).

    Ensuite, bien sûr, vous ajouteriez (et supprimeriez) la classe .hover de votre élément.

1
Spencer

Je sais que ce message est un peu ancien, mais pour ceux qui le trouvent sur Google, j'ai créé un outil de navigation transversale qui vous permet de visualiser votre mise en page HTML/CSS en déplaçant simplement la souris. Vous pouvez facilement afficher les éléments dans leur état de survol.

HTML Box Visualizer - GitHub

0
Gabriel McAdams

Dans les versions plus récentes de Firefox (au moins v57 et plus), l'interface utilisateur de l'inspecteur est légèrement différente de celle à laquelle les autres réponses ont été publiées. Pour activer et geler l’état :active/:hover/:focus d’un élément, inspectez-le (clic droit -> Inspecter l’élément) et cliquez sur dans l’inspecteur:

 enter image description here

Résultat:

 enter image description here

Source (les images sont sous licence CC-BY-SA v2.5, Les contributeurs de Mozilla)

0
balu

Je fais souvent quelques CSS ou Javascript alternatifs pour "geler" mon événement survolé; Réglez-le à la perfection avec Firebug et remettez mon vol stationnaire en place.

0
Ecropolis

Oui, vous pouvez cliquer avec le bouton droit de la souris sur "Inspecter l'élément" lors du déclenchement de l'état de survol. Cela a fonctionné pour moi dans Firebug et WebKit.

0
user1703862