Voir: survoler l'état dans Chrome Developer Tools


855

Je veux voir le :hoverstyle d'une ancre sur laquelle je passe la souris dans Chrome . Dans Firebug , il y a une liste déroulante de styles qui me permet de sélectionner différents états pour un élément.

Je n'arrive pas à trouver quelque chose de similaire dans Chrome. Suis-je en train de manquer quelque chose?


Bonne question 'car je cherchais comment modifier le style de survol dans Firebug - voir ici stackoverflow.com/questions/5389245/…
Chris Halcrow

1
Je sais que ce n'est pas une solution complète / parfaite au problème, mais je n'ai pas trouvé de solution dans les réponses qui fonctionnerait pour les événements de survol. L'utilisation de Safari vous permet de survoler tout en utilisant les outils du navigateur. Par conséquent, juste pour ce problème, envisagez d'utiliser un autre navigateur.
le12

Réponses:


1256

Vous pouvez maintenant voir les deux règles de pseudo-classe et les forcer sur les éléments.

Pour voir les règles comme :hoverdans le volet Styles, cliquez sur le petit :hovtexte en haut à droite.

Basculer l'état de l'élément

Pour forcer un élément à l' :hoverétat, faites un clic droit dessus et sélectionnez :hover.

Force l'état de l'élément

Conseils supplémentaires sur le panneau des éléments dans les raccourcis des outils de développement Chrome .


3
Je ne sais pas quand cela a changé, mais vous pouvez maintenant cliquer avec le bouton droit -> forcer l'état de l'élément (depuis le volet des éléments) sur d'autres éléments (pas seulement des <a>éléments) maintenant.
Travis Northcutt

3
Cela fonctionne pour les modifications CSS: hover, mais pas si vous effectuez des modifications onhover à l'aide de JS.
matthew_360

Voici une petite vidéo que j'ai créée pour montrer: l'état de vol stationnaire dans Chrome 59 si cela aide quelqu'un youtu.be/Bklz3lGTFi8
RoccoB

54

EDIT: Cette réponse était avant la correction du bug, voir la réponse de tnothcutt.

C'était un peu délicat, mais voici:

  • Faites un clic droit sur l'élément, mais N'éloignez PAS le pointeur de la souris de l'élément, gardez-le en vol stationnaire.
  • Choisissez inspecter l'élément via le clavier, comme dans la flèche vers le haut, puis sur la touche Entrée.
  • Regardez dans les outils de développement sous les règles CSS correspondantes, vous devriez pouvoir voir: survoler.

PS: J'ai essayé cela sur l'un de vos tags de question.


31

Je voulais voir l'état de survol sur mes info-bulles Bootstrap. Forcer l'état the: hover dans Chrome dev Tools n'a pas créé la sortie requise, mais déclencher l'événement mouseenter via la console a fait l'affaire dans Chrome. Si jQuery existe sur la page, vous pouvez exécuter:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Forcer le survol ou l'entrée de la souris pour les info-bulles Bootstrap


Ceci est la meilleure réponse
Argun

20

Il existe plusieurs façons de voir les styles HOVER STATE dans Chrome Developer Tools.

Méthode 01

entrez la description de l'image ici

Méthode 02

entrez la description de l'image ici

Avec Firefox Default Developer Toll

entrez la description de l'image ici

Avec Firebug

entrez la description de l'image ici


9

Au cas où cela aiderait, cela semble être plus facile dans le dernier Chrome (47.0.2526.106):

Inspectez l'élément puis cliquez sur les trois points blancs dans la gouttière gauche:
cliquez sur les trois points blancs

Choisissez ensuite l'état de l'élément souhaité dans cette liste déroulante:
cette liste déroulante


4

Je ne pense pas qu'il existe un moyen de le faire. J'ai soumis une demande de fonctionnalité . S'il y a un moyen, les développeurs de Google le feront sûrement remarquer et je modifierai ma réponse. Sinon, nous devrons attendre et regarder. (vous pouvez lancer le vote pour voter)


Commentaire 1 par un membre du projet Chrome : dans 10.0.620.0, le panneau Styles affiche les styles: hover pour l'élément sélectionné mais pas: active.


(à ce jour) La version actuelle du canal stable est la 8.0.552.224.

Vous pouvez remplacer votre installation de canal stable de Google Chrome par le canal bêta ou le canal de développement (voir Chaînes de version à accès anticipé ).

Vous pouvez également installer une installation secondaire de Chrome qui est encore plus à jour que le canal Dev .

... La version Canary est mise à jour encore plus fréquemment que le canal Dev et n'est pas testée avant d'être publiée. Étant donné que la version Canary peut parfois être inutilisable, elle ne peut pas être définie comme votre navigateur par défaut et peut être installée en plus de l'un des canaux ci-dessus de Google Chrome. ...


Grande enquête. Je bascule la dernière version de développement (10.0.612.3), donc j'attendrai un peu et j'espère que je verrai le: hover goodness!
Ben

4

Je sais que ce que je fais est tout à fait la solution de contournement, mais cela fonctionne parfaitement et c'est la façon dont je le fais à chaque fois.

Détacher les outils de développement de Chrome

Ensuite, procédez comme ceci:

  • Assurez-vous d'abord que les outils de développement Chrome sont désamarrés.
  • Ensuite, déplacez simplement n'importe quel côté de la fenêtre Dev Tools au milieu de l'élément que vous souhaitez inspecter en survol.

Survolez l'élément

  • Enfin, survolez l'élément, faites un clic droit et inspectez l'élément, déplacez votre souris dans la fenêtre Dev Tools et vous pourrez jouer avec votre élément: hover css.

À votre santé!


1
Je vais ajouter un commentaire pour que je puisse le retrouver, car je sais que j'en aurai besoin! Particulièrement important pour les plugins d'interface utilisateur tiers imprévisibles.
cfranklin

3

Je déboguais un hoverétat de menu avec Chrome et je l'ai fait pour pouvoir voir le code d'état de vol stationnaire:

Dans le Elementspanneau, cliquez sur le Toggle Element statebouton et sélectionnez :hover.

Dans le Scriptspanneau, accédez à Event Listeners Breakpointsdans la section inférieure droite et sélectionnez Mouse -> mouseup.

Inspectez maintenant le menu et sélectionnez la case souhaitée. Lorsque vous relâchez le bouton de la souris, il devrait s'arrêter et vous montrer l'état de survol de l'élément sélectionné dans le Elementspanneau (regardez la Stylessection).


2

Changement de vol stationnaire statut Chrome est assez facile, il suffit de suivre les étapes ci - dessous:

1) Faites un clic droit sur votre page et sélectionnez inspecter

entrez la description de l'image ici

2) Sélectionnez l'élément que vous souhaitez faire inspecter dans le DOM

entrez la description de l'image ici

3) Sélectionnez l'icône d'épingle entrez la description de l'image ici (Toggle Element State)

4) Cochez ensuite le survol

Vous pouvez maintenant voir l'état de survol du DOM sélectionné dans le navigateur!


1

Je pouvais voir le style en suivant les étapes ci-dessous suggérées par Babiker - "Faites un clic droit sur l'élément, mais ne déplacez pas le pointeur de la souris loin de l'élément, gardez-le en vol stationnaire. Choisissez inspecter l'élément via le clavier, comme dans la flèche vers le haut et puis touche Entrée. "

Pour changer de style, suivez les étapes ci-dessus, puis - Modifiez l'onglet de votre navigateur en appuyant sur ctrl + TAB sur le clavier. Cliquez ensuite sur l'onglet que vous souhaitez déboguer. Votre écran de survol sera toujours là. Maintenant, prenez soigneusement votre souris dans la zone des outils de développement.


1
Vous n'avez pas besoin de garder votre souris en vol stationnaire
Zachary Kniebel

1

Dans mon cas, je veux copier l'infobulle de bootstrap. Mais les méthodes ci-dessus ne fonctionnent pas pour moi. Je suppose que le bootstrap a implémenté cela par quelque chose comme un événement d'entrée / sortie de souris.

Quoi qu'il en soit, lorsque je survole un bouton, il générera un élément html frère sous le bouton, donc je sélectionne l'élément parent du bouton dans l'onglet "Éléments" de la fenêtre "Outils de développement", survolez le bouton et "Ctrl + C", alors je peux coller le code source qui contient le code généré. Trouvez enfin le code généré et ajoutez-le au code source par "Modifier en HTML" dans l'onglet "Eléments".

J'espère que cela peut aider quelqu'un.


0

Je pense que ce n'est plus un problème dans Chrome, mais juste au cas où. J'ai écrit ce script jQuery pour inspecter le DOM lorsque je me déplace avec la touche TAB.

Si changé pour utiliser 'mouseover', cela ressemblerait à ceci:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

Vous pouvez facilement le modifier pour supprimer le gestionnaire d'événements chaque fois que vous cliquez ou faites quelque chose sur un élément sur lequel vous souhaitez vous arrêter.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.