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

J'ai écrit un article sur le débogage du CSS des éléments qui disparaissent

Utilisation de raccourcis pour entrer automatiquement en mode debugger avec un raccourci clavier :

---

1. Installer l'extension shortkeys
2. Click sur l'icône de l'extension et choisissez "options" :
   
3. Configurer comme suit :
4. Click sur le bouton "Enregistrer les raccourcis" (en bas à droite)

Maintenant, allez sur n'importe quelle page, assurez-vous que les devtools sont ouverts, et appuyez sur les touches CTRL+ESPACE, lorsque votre élément cible d'inspection est visible.

---

J'utilise Windows OS et cette combinaison de raccourcis me convient et n'est pas déjà "prise" par un autre raccourci, mais bien sûr, vous pouvez en choisir un autre.

Answer 2

Vous pouvez voir les éléments apparaissant et disparaissant dans l'inspecteur sous éléments. Si vous naviguez jusqu'à l'élément lorsqu'il est visible, vous devriez pouvoir le voir disparaître ou voir son css changer quand son statut change.

Ceci est possible avec Firebug dans Firefox ou l'inspecteur intégré dans Chrome.

Answer 3

J'avais le même problème, mais j'utilise Firefox, il disparaît dès que j'ouvre l'élément d'inspection. J'ai trouvé une solution : ouvrez les 4 tirets (paramètres), allez dans Développeur web > Débogueur, et appuyez immédiatement sur F8, qui est le raccourci pour la pause qui arrête le script avant qu'il ne démarre et détecte que vous avez ouvert les outils de développement.