web-dev-qa-db-fra.com

"Inspecter" un élément de survol?

Remarque: j'ai lu des discussions similaires, mais aucune de mes préoccupations - je peux très bien cliquer dessus, elle disparaît à ce moment-là.

Je trouve "Inspect Element" un outil inestimable dans Chrome. Cependant, lors de ma dernière incursion, j’apprends comment de nombreuses personnes possèdent déjà de nombreuses compétences magiques. élément parent.

Le menu contextuel (ou vers le bas) n’est pas assez stylé comme je le souhaite, aussi je clique avec le bouton droit de la souris sur> élément pour voir ce qui vient d’où exactement et avoir une meilleure idée de la façon de réaliser l’effet souhaité.

Cependant, dès que ma souris est éloignée du menu, elle est partie.

Je ne peux donc pas sélectionner différents éléments dans le volet d'inspection et voir quelle zone est mise en surbrillance en même temps.

Y a-t-il un moyen de contourner cela sans changer le menu afin qu'il reste "apparu" une fois activé?

google-chromegoogle-chrome-devtools
80
OJFord

Si l'effet hover est donné avec CSS, alors oui, j'utilise normalement deux options pour obtenir ceci:

Un, pour see le hover effect lorsque la souris quitte le hover area:
Ouvrez l'inspecteur dans la fenêtre ancrée et augmentez la largeur jusqu'à atteindre votre HTML element, puis faites un clic droit et le menu contextuel doit être sur la zone de l'inspecteur ... puis lorsque vous déplacez la souris sur la vue de l'inspecteur, le hover effect rester activé dans le document.

enter image description here

Deux, à keep le hover effect même si la souris ne survole pas le HTML element, ouvrez l'inspecteur, allez à Styles TAB et cliquez sur l'icône en haut à droite qui indique Toggle Element State... (rectangle en pointillé avec une flèche) Vous pouvez y activer manuellement le Hover Event (entre autres) avec la case à cocher fournie.

enter image description here

Si ce n'est pas clair du tout, faites le moi savoir et je pourrai ajouter quelques captures d'écran.  Edited: capture d'écran ajoutée.

Et enfin et comme je le dis au début, je ne peux le faire que si le hover est défini avec CSS:HOVER... lorsque vous contrôlez le hover state avec jQuery.onMouseOver _ par exemple, ne fonctionne que (parfois), la méthode One.

J'espère que ça aide.

55
gmo

Si le survol est déclenché par JS, il suffit de suspendre l'exécution du script via le clavier. C’est un moyen beaucoup plus simple de geler le DOM que ne le suggèrent les autres réponses.

Voici comment procéder dans Chrome. Je suis sûr que Firefox a une procédure équivalente:

  1. Ouvrez les outils de développement et accédez à Sources.

  2. Notez le raccourci pour suspendre l'exécution du script—F8.

    Pause script execution

  3. Interagissez avec l'interface utilisateur pour que l'élément apparaisse.

  4. Frappé F8.
  5. Maintenant, vous pouvez déplacer votre souris, inspecter le DOM, peu importe. L'élément restera là.
103
mxxk

Ce qui a fonctionné pour moi est de sélectionner le tag spécifique que je voulais inspecter et de le faire:

enter image description here

Après avoir fait ce qui précède, je choisirais normalement à nouveau une étiquette, puis la liste déroulante restera automatiquement telle quelle, même lorsque je passerai la souris à d’autres endroits tels que Inspect Element, etc.

Vous pouvez simplement actualiser le navigateur lorsque vous inspectez les éléments du menu déroulant pour revenir à l'état normal.

J'espère que cela t'aides. :)

27
Woppi

Vous pouvez également le faire dans la console javascript:

$('#foo').trigger('mouseover');

Un élément qui "gèlera" l'élément dans l'état "survol".

12
pixelearth

Voici comment je le fais sans modification de CSS ni pause de JS dans Chrome (je suis sur un Mac et je n'ai pas de PC devant moi si vous utilisez Windows)):

  1. avoir votre console de développeur ouverte.
  2. n'activez pas encore l'outil d'inspection en vol stationnaire, mais ouvrez le sous-menu de votre choix en déplaçant votre souris dessus.
  3. frappé Command+Shift+C (Mac) ou Ctrl+Shift+C (Win/Linux)

désormais, l'outil d'inspection en vol stationnaire s'appliquera aux éléments que vous avez ouverts dans votre sous-navigation.

5
Josh

Je ne sais pas s'il était présent dans les versions précédentes du navigateur, mais je viens de découvrir cette méthode extrêmement simple.

Ouvrez l'inspecteur dans chrome ou Firefox, cliquez avec le bouton droit de la souris sur l'élément qui vous intéresse et sélectionnez l'option appropriée (dans ce cas: survol). Cela déclenchera le fichier CSS associé.

Opening the menu in chromiumOpening the same menu in Firefox

Captures d'écran de Firefox 55 et de chrome 61.

2
MayeulC

Excellent truc!

Merci à OGM pour ce conseil. Je ne savais pas que ces paramètres d'attributs étaient extrêmement utiles.

Comme une petite révision de la formulation, je voudrais expliquer ce processus comme suit:

  • Faites un clic droit sur l'élément que vous souhaitez styler

    • Ouvrir l'outil 'Inspecter'

    • Sur le côté droit, accédez au petit onglet Styles.

    • Trouvé ci-dessus le contenu de la feuille de style CSS

    • Sélectionnez l'option .hov - Cela vous donnera tous les paramètres disponibles pour l'élément HTML sélectionné

    • Cliquez et changez toutes les options pour être inactif

    • Maintenant Sélectionnez l’état que vous souhaitez modifier - Lors de l’activation de l’une de ces options, votre feuille de style vous dirigera directement vers ces paramètres:

Styles - Filtres de peaufinage - Éléments interactifs

Cette information m'a sauvé la vie, je ne peux pas croire que je viens d'en entendre parler!

1
Dan Haddock

changez le CSS pour que la propriété qui cache le menu ne soit pas appliquée pendant que vous y travaillez est ce que je fais.

0
Woody