Voir :état de pointage en Chrome Developer Tools
Je veux voir le :hover
style pour un point d'ancrage, je suis planant dans google Chrome. Dans Firebug, il y a un menu déroulant de style, qui me permet de sélectionner les différents états d'un élément. Je n'arrive pas à trouver quelque chose de semblable dans google Chrome. Ai-je raté quelque chose?
- Bonne question, parce que je cherchais comment faire pour modifier passez style dans Firebug - voir ici stackoverflow.com/questions/5389245/...
- Je sais que c'est pas complète/solution parfaite à ce problème, mais ne pouvais pas trouver une solution dans les réponses qui travaillent pour effet de survol des événements. À l'aide de Safari vous permet de planer pendant l'utilisation d'outils de votre navigateur. Donc, juste pour ce problème, envisager d'utiliser un autre navigateur.
Vous devez vous connecter pour publier un commentaire.
Maintenant, vous pouvez voir à la fois le pseudo-règles de classe et de forcer sur les éléments.
Pour voir les règles comme
:hover
dans le volet Styles de cliquer sur le petit:hov
texte en haut à droite.À la force d'un élément dans
:hover
état, cliquez-droit sur elle.Des conseils supplémentaires sur la les éléments du panneau dans Outils De Développement Chrome Raccourcis.
<a>
éléments) maintenant.EDIT: la réponse était avant la correction de bug, voir tnothcutt de réponse.
C'était un peu délicat, mais va ici:
PS: j'ai essayé sur une de vos question tags.
Je voulais voir l'état de pointage sur mon Bootstrap info-bulles. En forçant le le :hover état dans Chrome dev Tools n'a pas la création de la sortie, mais le déclenchement de l'événement mouseenter via la console a fait le tour de google Chrome. Si jQuery n'existe sur la page, vous pouvez exécuter:
Il y a plusieurs façons de voir ÉTAT de pointage styles dans Chrome Developer Tools.
Méthode 01
Méthode 02
Avec Firefox Par Défaut Développeur De Péage
Avec Firebug
Au cas où il permet, ce qui semble être plus facile dans le dernier Chrome (47.0.2526.106):
Inspecter l'élément, puis cliquez sur les trois points blancs dans la gouttière de gauche:
Puis choisissez l'élément souhaité de l'état dans ce menu déroulant:
Je ne pense pas qu'il y est une façon de le faire. J'ai soumis une demande de fonctionnalité. Si il existe un moyen, les développeurs de Google hargneux point et je vais éditer ma réponse. Si pas, nous devrons attendre et voir. (vous pouvez star de la question de voter pour elle)
(comme de ce post) Courant Stable canal version est 8.0.552.224.
Vous pouvez remplacer votre Stable canal installation de Google Chrome avec la La bêta de canal ou la Dev channel (Voir L'Accès Anticipé À La Libération Des Canaux).
Vous pouvez également installer un secondaire de l'installation de google chrome qui est encore plus à jour que le Dev channel.
Je sais que ce que je fais, c'est tout à fait la solution de contournement, mais il fonctionne parfaitement et qui est la façon dont je le fais à chaque fois.
Ensuite, procédez comme ceci:
Cheers!
J'ai été le débogage d'un menu
hover
état avec le Chrome et le firent pour être en mesure de voir l'état de pointage code:Dans le
Elements
panneau cliquez surToggle Element state
bouton et sélectionnez:hover
.Dans le
Scripts
panneau aller àEvent Listeners Breakpoints
dans le coin inférieur droit de la section et sélectionnezMouse -> mouseup
.Maintenant parcourir le Menu et sélectionnez la zone que vous voulez. Lorsque vous relâchez le bouton de la souris, il doit s'arrêter et de vous montrer l'élément sélectionné d'état de pointage dans le
Elements
panneau (regardez laStyles
section).J'ai pu voir le style en suivant les étapes ci-dessous proposé par babiker a -
"Cliquez-droit sur l'élément, mais NE PAS déplacer le pointeur de votre souris à l'écart de l'élément, de le garder en état de pointage. Choisissez inspecter l'élément via le clavier, comme dans hit flèche vers le haut, puis Entrez la clé."
Pour changer de style, suivez les étapes ci-dessus, puis -
Modifier votre navigateur à onglet en appuyant sur ctrl + TAB sur le clavier.
Puis cliquez de nouveau sur l'onglet que vous souhaitez déboguer. Votre passez de l'écran sera toujours là. Maintenant, prenez soigneusement votre souris pour outil de développement de la zone.
Changer de passez statut de Chrome est assez facile, il suffit de suivre ces étapes ci-dessous:
1) clic Droit dans votre page et sélectionnez inspecter
2) Sélectionnez l'élément que vous voulez avoir inspecter dans le DOM
3) Sélectionnez l'icône d'épingle (Bascule Élément de l'État)
4) Puis cochez la passez
Maintenant, vous pouvez voir l'état de pointage de la sélection DOM dans le navigateur!
Dans mon cas, je veux dubug bootstrap info-bulle. Mais les méthodes ci-dessus fonctionne pas pour moi. Je suppose que bootstrap mis en œuvre ce par quelque chose comme de la souris in/out de l'événement.
De toute façon, quand j'ai passez la souris sur un bouton, il va générer un frère de l'élément html ci-dessous sur le bouton, donc je sélectionne le bouton de l'élément parent dans "Éléments" de l'onglet "outils de développement" de la fenêtre, placez le bouton, et "Ctrl + C", alors je peux coller le code source qui contient le code généré. Trouver le code généré, et l'ajouter dans le code source par "Modifier le HTML" dans "Éléments" de l'onglet.
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 jQuery script pour inspecter les DOM quand je vous déplacer avec la touche de TABULATION.
En cas de changement de l'utilisation de 'mouseover', ressemble à ceci:
Vous pouvez facilement le modifier pour supprimer le gestionnaire d'événement à chaque fois que vous cliquez sur ou de faire quelque chose sur un élément vous voulez vous arrêter au.