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

Question

L'utilisation de l'inspecteur Web de Chromes pour visualiser le code est très utile. Mais comment visualiser, par exemple, le code de survol d'un bouton ? Vous devez passer la souris sur le bouton et ne pouvez donc pas l'utiliser (la souris) dans l'inspecteur. Existe-t-il des raccourcis ou d'autres moyens d'accomplir cette tâche dans l'inspecteur ?

Answer 1

Maintenant vous pouvez voir les règles de style de la pseudo-classe et les forcer sur les éléments.

Pour voir les règles comme :hover dans le volet Styles, cliquez sur le petit bouton en forme de boîte en pointillés en haut à droite.

Pour forcer un élément dans :hover cliquez sur le bouton droit de la souris.

Vous pouvez également utiliser le volet latéral Points d'arrêt des auditeurs d'événements dans le panneau Scripts et choisir de faire une pause dans les gestionnaires du passage de la souris.

Answer 2

Vous pouvez également utiliser le volet latéral Points d'arrêt des auditeurs d'événements dans le panneau Scripts et choisir de faire une pause dans les gestionnaires du passage de la souris.

Answer 3

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

Espérons qu'ils rendront cela un peu plus facile dans les prochaines versions.

Answer 4

En chrome :

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

Dans Firefox :

dans firebug :

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

Answer 5

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 panneau latéral Event Listeners du panneau Elements. Une autre solution consiste à appuyer sur le bouton pause dans le panneau Scripts et à survoler l'élément. Le débogueur s'arrêtera à la première instruction du premier gestionnaire d'événements.