Inspecter l'élément qui n'apparaît que lorsqu'un autre élément est survolé / saisi avec la souris

Souvent, je veux inspecter un élément (par exemple, une info-bulle) qui n'apparaît que lorsqu'un autre élément est survolé / entré avec la souris. 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 contenant.

Existe-t-il un moyen de suspendre les événements JS afin que je puisse passer la souris sur l'élément, puis suspendre 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 .

C'est assez simple 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'info-bulle en survolant le bouton
3. Appuyez sur F8 pour figer la page
4. Basculez vers le panneau Éléments et utilisez l'icône en forme de loupe en haut à gauche pour sélectionner l'info-bulle

Si l'info-bulle apparaît à cause du 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, sélectionnez "forcer l'état de l'élément", puis sélectionnez ": survoler"
4. Inspectez l'info-bulle CSS

Est à la fois Safari et offre Web Inspector Chrome les cases où vous pouvez activer ou désactiver le :active, :focus, :hoveret l' :visitedétat d'un élément. Leur utilisation pourrait être encore plus facile.

Safari:

Chrome:

Il existe également une autre façon délicate de le faire:

1. Passez en revue l'élément qui fait apparaître votre info-bulle.
2. Cliquez avec le bouton 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 des 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.

Bien que la réponse de @ SomeGuy soit excellente (t-up pour les gifs animés), vous pouvez toujours le faire par programme. Ouvrez simplement la console et tapez le nom de l'événement

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

(avec une syntaxe spécifique au 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 saisissez, 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 taper debugger;(qui est son équivalent script)