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

(Cette réponse s'applique uniquement aux outils de développement Chrome. Voir la mise à jour ci-dessous.)

Trouvez un élément qui contient l'élément qui disparaît. Cliquez avec le bouton droit sur l'élément et appliquez "Pause sur... > Modifications du sous-arbre." Cela lancera une pause du débogueur avant que l'élément ne disparaisse, ce qui vous permettra d'interagir avec l'élément dans un état de pause.

Mise à jour 22 octobre 2019 : avec la sortie de la version 70, il semble que FireFox supporte enfin ce type de débogage 2 3:

Mise à jour 15 septembre 2020: Chrome a une option "Émuler une page en focus" (vous pouvez l'obtenir depuis le Menu Commande [⌘]+[P], ou les Préférences Globales) pour ce besoin exact. 5 - mention spéciale à @sulco sur Twitter

Answer 2

1. Ouvrez la console
2. Tapez setTimeout(()=>{debugger;},5000);
3. Appuyez sur Entrée

Vous avez maintenant 5 secondes pour faire apparaître votre élément. Une fois qu'il est apparu, attendez que le débogueur soit activé. Tant que vous ne reprenez pas, vous pouvez jouer avec votre élément et il ne disparaîtra pas.

---

Astuce utile pour éviter de répéter ces étapes à chaque fois :

Ajoutez ceci en tant que favori :

1. Mettez n'importe quelle page en favori
2. Modifiez ce nouveau favori
3. Remplacez l'URL/localisation par : javascript:(function(){setTimeout(()=>{debugger;},5000);})();

La prochaine fois que vous voudrez utiliser ceci, il vous suffira de cliquer/taper sur ce favori.

Answer 3

Une méthode alternative dans Chrome :

• Ouvrez les outils de développement (F12).
• Sélectionnez l'onglet "Sources".
• Pendant que l'élément que vous voulez est affiché, appuyez sur F8 (ou Ctrl+/). Cela interrompra l'exécution du script et "figera" le DOM exactement tel qu'il est affiché.
• À partir de ce point, utilisez Ctrl+Shift+C pour sélectionner l'élément.

Answer 4

Vérifié en 2022

Faites ce qui suit :

1. Ouvrez la console et accédez à l'onglet Éléments
2. Tapez command + shift + P (OSX) ou control + shift + P (Windows)
3. Tapez le mot focused
4. Sélectionnez Émuler une page focus dans le menu

Maintenant, en cliquant dans la console, l'élément ne se fermera pas.

Answer 5

Je utilise 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 dans "inspecter l'élément".
2. Allez dans l'onglet sources.
3. Ensuite, survolez l'élément.
4. Ensuite, en utilisant le clavier F8 ou Command(Window) \. Cela mettra en pause l'écran dans un état statique et l'élément ne disparaîtra pas lors du survol.