Comment inspecter un élément en voie de disparition dans un navigateur?

Comment inspecter un élément qui disparaît lorsque ma souris s’éloigne? Exemple de liste déroulante qui disparaît

Je ne connais pas son identité, sa classe ou quoi que ce soit mais je veux l’inspecter.

Solutions que j’ai essayées:

Exécutez le sélecteur jQuery dans la console $('*:contains("some text")') mais n’a pas eu de chance, principalement parce que l’élément n’est pas caché mais probablement supprimé de l’arborescence DOM.

Inspecter manuellement l’arbre DOM pour les modifications ne me donne rien car il semble être trop rapide pour remarquer ce qui a changé.

SUCCÈS:

J’ai réussi avec les points d’arrêt Event. Spécifiquement – mousedown dans mon cas. Il suffit d’aller à Sources-> Event Listener Breakpoints-> Mouse-> mousedown dans Chrome. Après que j’ai cliqué sur l’élément que je voulais inspecter et à l’intérieur des Scope Variables j’ai vu des directions utiles.

(Cette réponse s’applique uniquement aux outils de développement Chrome.)

Recherchez un élément contenant l’élément qui disparaît. Cliquez avec le bouton droit sur l’élément et appliquez “Break on …> Subtree Modifications.” Cela lancera une pause de débogueur avant que l’élément ne disparaisse, ce qui vous permettra d’interagir avec l’élément en pause.

entrer la description de l'image ici

Une méthode alternative dans Chrome:

Pendant que l’élément souhaité est affiché, appuyez sur F8 (ou Ctrl + /). Cela va casser l’exécution du script en gelant le DOM exactement tel qu’il est.

De là, vous pouvez utiliser Ctrl + Maj + C pour sélectionner l’élément éphémère.

J’utilise du chrome sur Mac, j’ai suivi les étapes ci-dessus, mais je vais essayer d’expliquer un peu plus:

  1. Faites un clic droit et allez inspecter l’élément.
  2. Aller à l’onglet sources.
  3. Survolez ensuite l’élément.
  4. Puis en utilisant le clavier F8 Command(Window) \ . Il mettra en pause l’écran dans un état statique et l’élément ne disparaîtra pas lors du survol.

Dans Firebug, il existe différentes solutions pour cela:

  1. Vous pouvez utiliser Break On Mutate dans le panneau HTML. (avec cela vous pourrez aussi trouver quel est l’élément)
  2. Vous pouvez cliquer avec le bouton droit sur l’élément et choisir Inspecter l’élément avec Firebug

Vous pouvez également suivre le numéro 551 , qui demande un moyen de bloquer temporairement des événements spécifiques.

Modifier:

Pour savoir quel élément il s’agit, vous pouvez également activer les options du panneau HTML Mettre en surbrillance les modifications , Développer les modifications et les modifications de défilement dans la vue pour rendre l’élément visible dans le panneau HTML.

Sebastian

Vous pouvez afficher les éléments apparaissant et disparaissant dans l’inspecteur sous les éléments. Si vous naviguez vers l’élément quand il est visible, vous devriez pouvoir le voir disparaître ou voir son changement CSS lorsqu’il change d’état.

Ceci est possible avec firebug dans firefox ou l’inspecteur construit en chrome.