Inspecter les éléments qui n'apparaissent que lorsqu'un autre élément est survolé/entré par la souris.

Question

Je souhaite souvent inspecter un élément (par exemple une info-bulle) qui n'apparaît que lorsqu'un autre élément est survolé/entré par la souris. L'élément qui apparaît est rendu visible par l'événement mouseenter de jQuery.

Je ne peux pas inspecter l'infobulle, car celle-ci disparaît lorsque ma souris quitte l'élément qui la contient.

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

À titre d'exemple, essayez d'inspecter les infobulles de Twitter bootstrap : http://getbootstrap.com/javascript/#tooltips .

Answer 1

C'est assez facile dans Chrome 38.0.2094.0.

Voici à quoi ça va ressembler :

Pas à pas :

1. Ouvrez le DevTools dans le panneau des sources.
2. Faire apparaître l'info-bulle en passant la souris sur le bouton
3. Appuyez sur F8 pour geler la page
4. Passez au panneau Éléments et utilisez l'icône de la loupe en haut à gauche pour sélectionner l'info-bulle.

Si l'infobulle apparaît à cause de CSS, voici ce que vous pouvez faire dans ce cas :

Pas à pas :

1. Ouvrez le DevTools
2. Sélectionnez l'élément déclencheur dans les outils de développement (le lien).
3. Cliquez avec le bouton droit de la souris, sélectionnez "forcer l'état de l'élément", puis sélectionnez ":hover".
4. Inspecter l'infobulle CSS

Answer 2

L'inspecteur Web de Safari et de Chrome propose des cases à cocher permettant d'activer l'option :active , :focus , :hover et :visited l'état d'un élément. Leur utilisation pourrait être encore plus simple.

Safari :

Chrome :

Answer 3

Il existe également un autre moyen délicat de le faire :

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

Votre infobulle restera visible, vous pourrez alors l'inspecter dans l'onglet Éléments.

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

Answer 4

Alors que Réponse de @SomeGuy est excellent (t-up pour les gifs animés), comme alternative vous pouvez toujours le faire de manière programmatique. Il suffit d'ouvrir la console et de taper le nom de l'évènement

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

(avec du javascript pur, la syntaxe spécifique 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 d'acc.) ou tapez debugger; (qui est son équivalent script)