web-dev-qa-db-fra.com

Inspecter l'élément qui n'apparaît que lorsque l'autre élément est survolé / saisi par la souris

Souvent, je souhaite inspecter un élément (par exemple, une info-bulle) qui n'apparaît que lorsqu'un autre élément est survolé/saisi. L'élément qui apparaît est rendu visible via l'événement mouseenter de jQuery.

Je ne peux pas inspecter l'info-bulle, car l'info-bulle disparaît lorsque ma souris quitte l'élément conteneur.

Existe-t-il un moyen de suspendre les événements JS pour que je puisse survoler l'élément, puis mettre en pause le JS du navigateur et l'inspecter avec succès?

Pour un exemple, essayez d'inspecter les info-bulles de Twitter bootstrap: http://getbootstrap.com/javascript/#tooltips .

javascriptgoogle-chrome-devtools
118
Don P

C'est assez facile dans Chrome 38.0.2094.0.

Voici à quoi cela ressemblera: 

Pas à pas:

  1. Ouvrez les DevTools dans le panneau Sources
  2. Faire apparaître l'infobulle en survolant le bouton
  3. Appuyez sur F8 pour figer la page
  4. Basculez vers le panneau Éléments et utilisez l'icône de la loupe en haut à gauche pour sélectionner l'info-bulle

Si l'info-bulle s'affiche à cause de CSS, voici ce que vous pouvez faire dans ce cas: 

Pas à pas:

  1. Ouvrez les DevTools
  2. Sélectionnez l'élément déclencheur dans les outils de développement (le lien)
  3. Faites un clic droit et sélectionnez "forcer l'état de l'élément", puis sélectionnez ": survoler"
  4. Inspectez l'info-bulle CSS
222
Some Guy

L'inspecteur Web de Safari et de Chrome propose des cases à cocher où vous pouvez basculer le :active, :focus, :hover et :visited état d'un élément. Leur utilisation pourrait être encore plus facile.

Safari:

The checkboxes in Safari

Chrome:

The checkboxes in Chrome

15
zıəs uɐɟəʇs

Il y a aussi une autre façon délicate de le faire:

  1. Passez en revue l'élément qui fait apparaître votre info-bulle.
  2. Faites un clic droit pour ouvrir le menu contextuel.
  3. Déplacez votre souris vers la fenêtre de votre outil de développement et faites un clic gauche n'importe où dans le panneau d'outils de développement.

Votre info-bulle restera visible, vous pourrez alors l'inspecter dans l'onglet Elément.

Testé sur Chrome. Ne semble pas fonctionner sur Firefox.

4
Nicolas Forney

Alors que réponse de @ SomeGuy est excellent (t-up pour les gifs animés), comme alternative, vous pouvez toujours le faire par programme. Ouvrez simplement la console et saisissez le nom de l'événement

document.getElementById('id').dispatchEvent(new Event('event-type'));

(avec une syntaxe spécifique à javascript pur peut varier selon le navigateur)

Encore plus facile avec jQuery:

$('#id').trigger('event-type');

Dans votre exemple ( http://getbootstrap.com/javascript/#tooltips ), ouvrez la console et tapez, par exemple:

$("button:contains('Tooltip on right')").mouseenter();

Et l'info-bulle apparaît dans le DOM et peut être inspectée/modifiée manuellement:

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

Comme dans les commentaires, si vous déplacez le pointeur de la souris sur le cadre de la page, vous pouvez déclencher d'autres événements tels que mouseout. Pour éviter cela, vous pouvez appuyer sur F8 (comme dans la réponse) ou tapez debugger; (qui est son équivalent de script)

3
blgt