Voir: survoler l'état dans Chrome Developer Tools

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?

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.

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

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

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

• 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.

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');

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

Méthode 01

Méthode 02

Avec Firefox Default Developer Toll

Avec Firebug

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:

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

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. ...

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.

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.

• 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é!

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).

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

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

3) Sélectionnez l'icône d'épingle (Toggle Element State)

4) Cochez ensuite le survol

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

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.

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.

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.