Question Voir: état du survol dans les outils de développement Chrome


Je veux voir le :hover style pour une ancre je plane sur Chrome. Dans Firebug, il y a une liste déroulante de style qui me permet de sélectionner différents états pour un élément. Je n'arrive pas à trouver quelque chose de similaire dans Chrome. Est-ce que je manque quelque chose?


751
2017-12-23 01:16


origine


Réponses:


Vous pouvez maintenant voir à la fois les règles de la classe Psuedo et les forcer sur les éléments.

Pour voir les règles comme :hover dans le volet Styles, cliquez sur le petit :hov texte en haut à droite.

Toggle element state

Forcer un élément dans :hover état, faites un clic droit dessus.

Force element state

Conseils supplémentaires sur la panneau d'éléments dans Raccourcis des outils de développement Chrome.


1091
2017-07-21 15:25



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

C'était un peu difficile, mais voici:

  • Cliquez avec le bouton droit sur l'élément, mais NE déplacez PAS le pointeur de la souris hors de l'élément, gardez-le dans l'état hover.
  • Choisissez l'élément inspecter via le clavier, comme dans la flèche de sélection, puis sur la touche Entrée.
  • Regardez dans les outils de développement sous Règles CSS assorties, vous devriez être capable de voir: hover.

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


51
2017-12-23 01:47



Je voulais voir l'état du hover sur mes infobulles Bootstrap. Forcer l'état the: hover dans Chrome dev Tools n'a pas créé la sortie requise, mais le déclenchement de 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');

Forcing hover or mouseenter for Bootstrap Tooltips


21
2017-12-23 15:25



Il y a plusieurs façons de voir HOVER STATE styles dans les outils de développement Chrome.

Méthode 01

enter image description here

Méthode 02

enter image description here

Avec Firefox Default Developer Toll

enter image description here

Avec Firebug

enter image description here


9
2018-01-06 08:05



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

Inspecter l'élément puis cliquer sur les trois points blancs dans la gouttière gauche:
click on the three white dots

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


7
2018-01-04 19:22



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 signaleront avec insistance et je modifierai ma réponse. Sinon, nous devrons attendre et regarder. (Vous pouvez commencer la question pour voter)


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


(à partir de ce post) Canal stable la version est 8.0.552.224.

Vous pouvez remplacer votre Canal stable l'installation de Google Chrome avec le Canal bêta ou la Canal Dev (Voir Canaux de lancement de l'accès anticipé).

Vous pouvez également installer un 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'a pas été 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 navigateur par défaut et peut être installée en plus de l'un des canaux ci-dessus de Google Chrome. ...


4
2017-12-23 01:34



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

Undock Chrome Developer Tools

Ensuite, procédez comme ceci:

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

Hover on element

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

À votre santé!


3
2017-08-21 23:11



Je déboguais un menu hover état avec Chrome et a fait cela pour être en mesure de voir le code d'état hover:

dans le Elements panneau cliquez sur Toggle Element state bouton et sélectionnez :hover.

dans le Scripts panneau aller à Event Listeners Breakpoints dans la section inférieure droite et sélectionnez Mouse -> mouseup.

Maintenant, inspectez le menu et sélectionnez la boîte que vous voulez. Lorsque vous relâchez le bouton de la souris, il devrait s'arrêter et vous montrer l'état de vol stationnaire de l'élément sélectionné dans le Elements panneau (regardez le Styles section).


2
2017-07-22 15:05