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?


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.


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.


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.


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 !
:)


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.


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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.