Voir: état de vol stationnaire Outils pour les développeurs Chrome
https://stackoverflow.com/questions/4515124
-
12-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je veux voir le style :hover pour une ancre Je planant dans Chrome. Dans Firebug, il y a un menu déroulant de style qui me permet de sélectionner différents états pour un élément. Je ne peux pas sembler trouver quelque chose de semblable dans Chrome. Am quelque chose que je manque?
La solution
Maintenant, vous pouvez voir à la fois les règles de classe et les forcer psuedo sur les éléments.
Pour voir les règles comme :hover dans les sous-fenêtre Styles cliquez sur le petit texte :hov en haut à droite.
Pour forcer un élément dans l'état de :hover, faites un clic droit.
Conseils supplémentaires sur les éléments panneau Chrome Outils de développement raccourcis .
Autres conseils
EDIT: Cette réponse était avant la correction du bug, voir la réponse de tnothcutt
C'était un peu difficile, mais va ici:.
- élément droit de la souris, mais ne permettent pas de déplacer le pointeur de la souris loin de l'élément, le maintenir en état de vol stationnaire.
- Choisissez inspecter élément via le clavier, comme frapper la flèche, puis touche Entrée.
- Rechercher dans les outils de développement en vertu des règles CSS Matched, vous devriez être en mesure de voir. Vol stationnaire
PS: J'ai essayé sur un de vos question tags
.Je voulais voir l'état de vol stationnaire sur mes infobulles Bootstrap. Forcer le la: état de vol stationnaire Outils de dev Chrome n'a pas créé la puissance requise, mais le déclenchement de l'événement mouseenter via la console fait l'affaire dans Chrome. Si jQuery existe sur la page que vous pouvez exécuter:
$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');
Il y a plusieurs façons de voir HOVER ÉTAT styles dans les outils de développement Chrome.
Méthode 01
Méthode 02
Avec Firefox Default Developer Toll
Avec Firebug
Dans le cas où il aide, cela 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 gauche:
Choisissez ensuite l'état d'élément souhaité dans ce menu déroulant:
Je ne pense pas qu'il y ait une façon de le faire. Je soumettais demande de fonctionnalité. S'il y a un moyen, les développeurs de Google se font hargneux dehors et je vais modifier ma réponse. Sinon, nous devrons attendre et regarder. (Vous pouvez activer la question de voter pour elle)
Commentaire 1 par membre du projet Chrome : Dans 10.0.620.0, le panneau styles affiche: styles de vol stationnaire pour l'élément sélectionné, mais pas:. actif
(comme de ce post) actuel version stable canal est 8.0.552.224.
Vous pouvez remplacer votre canal stable de Google Chrome avec le Version bêta ou canal Dev (Voir Early Access Versions disponibles ).
Vous pouvez également installer un l'installation secondaire de chrome qui est encore plus à jour que le canal Dev .
... La construction des Canaries est mis à jour encore plus fréquemment que le canal Dev et n'a pas été testé avant d'être libéré. Parce que la construction des Canaries peut parfois être inutilisable, il ne peut pas être défini comme votre navigateur par défaut et peut être installé en plus de l'un des canaux au-dessus de Google Chrome. ...
Je sais que ce que je fais 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 suit:
- Assurez-vous d'abord les outils de développement Chrome est désamarré.
- Ensuite, il suffit de déplacer tous les côtés de la fenêtre Outils Dev au milieu de l'élément que vous voulez inspecter tout plané.
- Enfin, l'élément hover, clic droit et élément inspecter, déplacez votre souris dans la fenêtre Outils Dev et vous pourrez jouer avec votre élément. Vol stationnaire css
Vive!
Je suis le débogage d'un état hover de menu avec Chrome et a fait cela pour être en mesure de voir le code d'état de vol stationnaire:
Cliquez dans le panneau Elements sur le bouton Toggle Element state et sélectionnez :hover.
Dans le panneau Scripts aller à Event Listeners Breakpoints dans la partie inférieure droite et sélectionnez Mouse -> mouseup.
inspecter le menu et sélectionnez la case que vous voulez. Lorsque vous relâchez le bouton de la souris, il doit arrêter et vous montrer l'état de vol stationnaire de l'élément sélectionné dans le panneau de Elements (consultez la section de Styles).
je pouvais voir le style en suivant les étapes ci-dessous proposées par Babiker - « Élément droit de la souris, mais ne pas déplacer le pointeur de la souris de l'élément, le maintenir en état de vol stationnaire. Choisissez élément inspectez via le clavier, comme frapper la flèche, puis touche Entrée. »
Pour changer de style suivi les étapes ci-dessus, puis - Modifier onglet du navigateur en appuyant sur Ctrl + TAB sur le clavier. Cliquez ensuite sur l'onglet Retour à déboguer. Votre écran de vol stationnaire sera toujours là. Maintenant, prenez soin de votre souris à la zone d'outil de développement.
Modification vol stationnaire statut Chrome est assez facile, il suffit de suivre les étapes ci-dessous:
1) clic droit dans votre page, puis sélectionnez inspecter
2) Sélectionnez l'élément que vous voulez avoir inspecter dans le DOM
3) Sélectionnez l'icône pin 
(Toggle Etat élément)
4) Puis cocher vol stationnaire
Maintenant, vous pouvez voir l'état de vol stationnaire de la DOM dans le navigateur!
Dans mon cas, je veux infobulle bootstrap dubug. Mais les méthodes ci-dessus fonctionnent pas pour moi. Je suppose que ce bootstrap mis en œuvre par quelque chose comme événement de souris in / out.
Quoi qu'il en soit, quand je hover sur un bouton, il va générer un élément html frère sous le bouton, je sélectionne l'élément parent du bouton dans l'onglet « Eléments » de la fenêtre « Outils de développement », placez le bouton, et « Ctrl + C », alors je peux coller le code source qui contient le code généré. trouver le dernier code généré, et l'ajouter au code source par « Modifier comme HTML » dans l'onglet « Eléments ».
L'espoir peut aider quelqu'un.
Je pense que ce ne soit plus un problème dans Chrome, mais juste au cas où. J'ai écrit ce script jQuery pour inspecter les DOM lorsque je me déplace avec la touche TAB.
En cas de modification à l'utilisation 'mouseover', ressemblerait à ceci:
$("body *").on('mouseover', function(event) {
console.log(event.target);
inspect(event.target);
event.stopPropagation();
});
Vous pouvez facilement modifier pour supprimer le gestionnaire d'événements chaque fois que vous cliquez ou faire quelque chose sur un élément que vous voulez arrêter à.
