Comment inspecter un élément en train de disparaître dans un navigateur?
Comment puis-je inspecter un élément qui disparaît lorsque ma souris s'éloigne? 
Je ne sais pas si c'est une identité, une 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’avez pas eu de chance, principalement parce que l’élément n’est pas masqué mais probablement supprimé de l’arborescence DOM.
L'inspection manuelle de l'arborescence DOM à la recherche de modifications ne me donne rien, car cela semble trop rapide pour constater les modifications.
SUCCESS:
J'ai réussi avec les points d'arrêt d'événement. Spécifiquement - mousedown dans mon cas. Il suffit d'aller à Sources-> Event Listener Breakpoints-> Mouse-> mousedown dans Chrome. Après cela, j'ai cliqué sur l'élément que je voulais inspecter et à l'intérieur Scope Variables J'ai vu des indications utiles.
(Cette réponse ne concerne que Chrome Outils de développement.)
Recherchez un élément contenant l'élément qui disparaît. Cliquez avec le bouton droit sur l'élément et appliquez "Interrompre sur ...> Modifications du sous-arbre". Cela déclenchera une pause du débogueur avant la disparition de l'élément, ce qui vous permettra d'interagir avec l'élément dans un état de pause.
Une méthode alternative dans Chrome:
Lorsque l'élément souhaité est affiché, appuyez sur F8 (ou Ctrl + /). Cela interrompra 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 fugace.
J'utilise chrome sur Mac. J'ai suivi les étapes ci-dessus, mais je vais essayer d'expliquer un peu plus:
- Faites un clic droit et allez inspecter un élément.
- Aller à l'onglet sources.
- Puis survolez l'élément.
- Ensuite, utilisez le clavier
F8oCommand(Window) \. Cela mettra l'écran en pause dans un état statique et l'élément ne disparaîtra pas au survol.
Dans Firebug, il existe différentes solutions pour cela:
- Vous pouvez utiliser Break On Mutate à l'intérieur du panneau HTML. (avec cela, vous pourrez également savoir de quel élément il s'agit)
- Vous pouvez cliquer avec le bouton droit sur l’élément et choisir Inspecter l’élément avec Firebug
Aussi, vous voudrez peut-être suivre numéro 551 , qui demande un moyen de bloquer temporairement des événements spécifiques.
Modifier:
Pour savoir de quel élément il s’agit, vous pouvez également activer le options du panneau HTML Mettez en surbrillance les modifications, Développez les modifications et Faites défiler les modifications dans la vue pour rendre l'élément visible dans le panneau HTML.
Sebastian
Dans mon cas, j'ai utilisé l'option Expand récursive sur Google Chrome:
Les étapes sont les suivantes:
- Inspecter le champ déroulant
- Trouver le DOM dynamique (le surlignage violet)
- Clic droit sur ce DOM dynamique
- Choisissez Développez récursivement :
![enter image description here]()
- Nous pouvons voir tous les éléments sont là
Voici une démo:
Survolez l'élément avec votre souris et appuyez sur F8 (ceci dans Chrome) pour suspendre l'exécution du script. L'état de vol stationnaire restera visible pour vous.
Cela vous amène à l'onglet sources. Retournez à l'onglet Eléments. Ce code temporel ne disparaîtra pas.
j'ai eu le même problème, mais j'utilise Firefox, il disparaît dès que j'ouvre l'élément inspect. J'ai trouvé une solution: ouvrez les 4 tirets (paramètres), accédez à développeur Web> débogueur et appuyez immédiatement sur F8, qui est le raccourci pour arrêter le script. avant de lancer et de détecter que vous avez ouvert les outils de développement
vous pouvez voir les éléments apparaître et disparaître dans l'inspecteur sous Éléments. Si vous naviguez vers l'élément lorsqu'il est visible, vous devriez pouvoir le voir disparaître ou voir son CSS changer lorsque son statut change.
C'est possible avec firebug dans firefox ou l'inspecteur intégré en chrome.