Comment puis-je inspecter un élément disparu dans un navigateur?

Question

Comment inspecter un élément qui disparaît quand ma souris s'éloigne?

Je ne connais pas son ID, sa classe ou quoi que ce soit mais je veux l'inspecter.

Solutions que j'ai essayées:

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

L'inspection manuelle de l'arborescence DOM pour les changements ne me donne rien car cela semble se produire trop rapidement pour remarquer ce qui a changé.

SUCCÈS :

J'ai réussi avec les points d'arrêt d'événements. En particulier - mousedown dans mon cas. Il suffit de se rendre à Sources-> Points d'arrêt des écouteurs d'événements-> Souris-> mousedown dans Chrome. Ensuite, j'ai cliqué sur l'élément que je voulais inspecter et à l'intérieur des Variables de portée j'ai vu quelques directives utiles.

Answer 1

La fonction Émuler une page focalisée est le meilleur moyen d'inspecter les éléments disparus. Après avoir activé cette fonction, les pop-ups ne disparaîtront pas.

À partir de mai 2023, Chrome a déplacé l'élément de menu pour cette fonction. Veuillez consulter la capture d'écran ci-dessous pour le trouver. La fonction se trouve dans la 9ème option du volet "Rendu".

Answer 2

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

1. Vous pouvez utiliser Break On Mutate à l'intérieur du panneau HTML. (avec cela, vous pourrez également découvrir de quel élément il s'agit)
2. Vous pouvez faire un clic droit sur l'élément et choisir Inspecter l'élément avec Firebug

Vous pouvez également suivre l'issue 551, qui demande un moyen de bloquer temporairement des événements spécifiques.

Éditer :

Pour découvrir de quel élément il s'agit, vous pouvez également activer les options du panneau HTML Mettre en surbrillance les changements, Étendre les changements et Faire défiler les changements dans la vue pour rendre l'élément visible à l'intérieur du panneau HTML.

Sebastian

Answer 3

Dans mon cas, j'ai utilisé l'option Étendre de manière récursive sur google chrome :

Les étapes sont :

1. Inspectez le champ de menu déroulant
2. Trouver le DOM dynamique (la surbrillance violet)
3. Cliquez avec le bouton droit sur ce DOM dynamique
4. Choisissez Étendre de manière récursive :
5. Nous pouvons voir que tous les éléments sont là

Voici une démo :

Answer 4

Passez votre souris sur l'élément et appuyez sur F8 (dans Chrome) pour mettre en pause l'exécution du script. L'état survol restera visible pour vous.

Cela vous emmènera dans l'onglet Sources. Revenez à l'onglet Éléments. Cette fois, le code ne disparaîtra pas.

Answer 5

Il pourrait y avoir un élément Dom et les fonctions du contrôleur se battant pour rafraîchir la session. Lancer l'application en "Démarrer sans débogage" m'a aidé dans mon cas.

entrer la description de l'image ici