web-dev-qa-db-fra.com

Comment utiliser chrome Web Inspector pour afficher le code de survol

L'utilisation de l'inspecteur web chromes pour afficher le code est très utile. Mais comment voyez-vous par exemple le code de survol pour 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 accomplir cela dans l'inspecteur?

96
Bo.

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

Pour voir les règles telles que :hover dans le volet Styles, cliquez sur le petit bouton en forme de pointillé en haut à droite.

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

Vous pouvez également utiliser le volet de la barre latérale du panneau Scripts des points d'arrêt de l'écouteur d'événements et choisir de suspendre les gestionnaires de survol.

152
Travis Northcutt

Vous pouvez également utiliser le volet de la barre latérale du panneau Scripts des points d'arrêt de l'écouteur d'événements et choisir de suspendre les gestionnaires de survol.

14
Yury Semikhatsky

C'est un peu agaçant, mais vous devez cliquer avec le bouton droit sur l'élément, puis, en gardant la souris sur le lien, utiliser votre clavier pour sélectionner le lien "Inspecter l'élément" et appuyer sur Entrée. Cela devrait vous montrer le CSS pour la pseudo-classe de survol pour l'élément sélectionné.

En espérant que cela facilite un peu les futures versions. 

4
purpletonic

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:

 enter image description here

dans firebug:

enter image description here

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

4
T.Todua

Je ne suis pas sûr de bien comprendre votre question, mais si vous souhaitez voir le code du gestionnaire d'événements, vous pouvez simplement inspecter l'élément et consulter le volet de la barre latérale Eléments d'écoute des événements du panneau des éléments .. Un autre moyen consiste simplement à appuyer sur le bouton Pause des scripts. Cliquez sur Panneau et survolez l'élément . Le débogueur s'arrêtera à la première instruction du premier gestionnaire d'événements.

1
loislo

S'il vous plaît jeter un oeil sur le lien ci-dessous pour la réponse

Voir: état de survol dans les outils de développement Chrome

0
Santosh Khalse