Comment utiliser l'inspecteur Web Chrome pour afficher le code de survol

99

L'utilisation de l'inspecteur Web chromes pour afficher le code est très utile. Mais comment visualisez-vous par exemple le code de survol d'un bouton? Vous devrez passer la souris sur le bouton et ne pourrez donc pas l'utiliser (souris) dans l'inspecteur. Existe-t-il des raccourcis ou d'autres moyens pour y parvenir dans l'inspecteur?

css google-chrome google-chrome-devtools web-inspector Bo.
la source
2
N'est-ce pas un double de cela? stackoverflow.com/questions/4515124/…
Mixologic
Est-ce que cela répond à votre question? Voir: état de
survol

Réponses:

156

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

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

Pour forcer un élément dans l' :hoverétat, cliquez dessus avec le bouton droit de la souris.

Vous pouvez également utiliser le volet de la barre latérale Event Listener Breakpoints dans le panneau Scripts et choisir de mettre en pause les gestionnaires de survol de la souris.

Travis Northcutt
la source
1
Dans Chrome 48 (et peut-être plus tôt), cette case en pointillé a été remplacée par une icône en forme de punaise qui indique Basculer l'état de l'élément lorsque vous passez la souris dessus. Ensuite, vous sélectionnez "survoler" dans la liste déroulante.
sameers
15

Vous pouvez également utiliser le volet de la barre latérale Event Listener Breakpoints dans le panneau Scripts et choisir de mettre en pause les gestionnaires de survol de la souris.

Yury Semikhatsky
la source
6

C'est un peu ennuyeux, mais vous devez faire un clic droit sur l'élément, puis, en maintenant votre souris sur le lien, utilisez votre clavier, sélectionnez le lien «Inspecter l'élément» et appuyez sur Entrée. Cela devrait vous montrer le css de la pseudo-classe de survol de l'élément sélectionné.

En espérant qu'ils rendront cela un peu plus facile dans les futures versions.

purplétonique
la source
Bon à savoir, mais oui, il est très frustrant que la souris doive rester au-dessus du lien ... même lorsque vous fouillez dans la fenêtre Inspecter l'élément en utilisant uniquement le clavier. Quelle nuisance!
Chad Schultz
Le véritable processus de forcer l'élément à l' :hoverétat, ( as in the accepted answer), est également atteint Via un clic droit sur l'élément,> Inspect et garder le pointeur là - bas, et puis utilisez les touches du clavier pour vérifier pseudo code .. Merci pour ce travail alternatif .... Donc pas vraiment une nuisance !
:)
5

Dans Chrome:

Vous pouvez également passer la souris sur un élément, puis cliquer CTRL+SHIFT+Cpour inspecter cet élément.

Dans Firefox:

entrez la description de l'image ici

dans firebug:

entrez la description de l'image ici

source: https://stackoverflow.com/a/11272205/2165415

T.Todua
la source
1

Je ne suis pas sûr d'avoir bien compris votre question, mais si vous voulez voir le code du gestionnaire d'événements, vous pouvez simplement inspecter l'élément et regarder le volet de la barre latérale des écouteurs d'événements du panneau Elements. Une autre façon consiste simplement à appuyer sur le bouton pause dans le panneau de scripts et à survoler l'élément. Le débogueur s'arrêtera à la première instruction du premier gestionnaire d'événements.

loislo
la source
Pourriez-vous être un peu plus précis sur la façon dont vous faites cela ?. Un cas typique serait un bouton que j'aime et que je veux voir comment l'effet de survol est accompli de la même manière facile que l'inspection ordinaire.
Bo.