Comment puis-je inspecter un élément qui disparaît dans un navigateur?

153

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

Je ne sais pas que c'est une pièce d'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 à l'intérieur de 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'arborescence DOM pour les changements 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 d'événement. Plus précisément - mousedown dans mon cas. Accédez simplement à Sources-> Event Listener Breakpoints-> Mouse-> mousedownChrome. Après cela, j'ai cliqué sur l'élément que je voulais inspecter et à l'intérieur Scope Variablesj'ai vu des directions utiles.

javascript google-chrome firefox firebug opera-dragonfly lukas.pukenis
la source
2
Votre question m'a aidé bien que je ne sois pas sur le point d'arrêt en utilisant les sources, j'ai exécuté le script suivant dans la console: document.body.addEventListener('mouseup',function(){ debugger; })Cela m'a mis dans une pause et j'ai pu inspecter les éléments créés.
HMR
Tu gères. J'ai eu ce problème exact avec un contrôle React-Select, où je ne pouvais pas afficher le code HTML des éléments de la liste car le sous-arbre était supprimé à chaque fois que je cliquais. Besoin des identifiants de l'article pour automatiser les clics à l'aide de Selenium. Merci!
araisbec

Réponses:

177

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

Recherchez un élément contenant l'élément qui disparaît. Faites un clic droit sur l'élément et appliquez "Pause sur ...> Modifications de sous-arborescence". Cela lancera 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 suspendu.

entrez la description de l'image ici

Mise à jour du 22 octobre 2019: avec la sortie de la v.70, il semble que FireFox prend enfin en charge ce type de débogage 2 3 :

entrez la description de l'image ici

arxpoetica
la source
1
Pour éviter toute confusion possible, le débogueur se mettra en pause lorsque vous déclencherez l'événement, c'est-à-dire en tapant un nom de lieu. Lorsque l'écran se met en pause, appuyez simplement sur le bouton de lecture du DOM lui-même et vous pourrez déclencher l'événement.
Dylan Pierce
Cela ne fonctionne pas si la page a capturé le clic droit et fait sa propre action lors du clic droit.
Michael le
Cela ne fonctionne pas pour le premier des deux dialogues dans le même conteneur
Still_learning
@Still_learning Pouvez-vous expliquer ce que vous entendez par «deux dialogues dans le même conteneur».
arxpoetica le
<v-container><v-dialog></v-dialog><v-dialog></v-dialog></v-container>- dans mon cas, la première boîte de dialogue ne s'affiche que jusqu'à ce que les données arrivent de la base de données, environ 1 seconde
Still_learning
92

Une méthode alternative dans Chrome:

  • Ouvrez devTools (F12).
  • Sélectionnez l'onglet "Sources".
  • Lorsque l'élément souhaité est affiché, appuyez sur F8 (ou Ctrl + /). Cela interrompra l'exécution du script et "gèlera" le DOM exactement tel qu'il est affiché.
  • À partir de là, utilisez Ctrl + Maj + C pour sélectionner l'élément.
Joseph Tinoco
la source
3
Parfait!! Cela fait exactement ce que je voulais
Daniel Loiterton
2
J'ai remarqué que cela ne fonctionne que lorsque les outils de développement sont déjà ouverts dans l'onglet «Sources».
hbulens
3
il gèle le code de l'exécution mais l'élément a toujours disparu (j'utilise React).
Lorem Ipsum Dolor
Mon Chrome dit F8 ou Crtl + \ (pas Crtl + /). De plus, le Crtl + \ ne fonctionne pas dans mon cas ...
Roger Veciana
Cela ne fonctionne pas sur les fenêtres contextuelles de contrôle vidéo de Google ... le contrôle semble disparaître de la vue dès que vous appuyez sur la touche et s'est complètement éteint avant le gel.
Michael le
18
  1. Ouvrir 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 frappe. Tant que vous ne reprenez pas, vous pouvez jouer avec votre élément et il ne disparaîtra pas.

Conseil utile pour éviter de répéter les étapes ci-dessus à chaque fois:

ajoutez ceci en tant que bookmarklet:

  1. Ajouter n'importe quelle page à vos favoris
  2. Modifier ce nouveau signet
  3. Remplacez l'URL / l'emplacement par: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

La prochaine fois que vous souhaiterez l'utiliser, cliquez / appuyez simplement sur ce signet.

Mojtaba
la source
1
C'est le moyen le plus rapide et le plus stable de déboguer les éléments qui disparaissent ^
warmwhisky
8

J'utilise Chrome sur Mac là-bas, 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. Accédez à l'onglet sources.
  3. Survolez ensuite l'élément.
  4. Puis 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 en survolant.
Black Mamba
la source
1
Merci, merci, pour les instructions détaillées! Après une démonstration de dextérité extrême - en cliquant sur un bouton, en appuyant sur Ctr + Shift + C, en déplaçant la souris pour survoler l'élément et en appuyant F8en l'espace d'une seconde et demie - j'ai finalement obtenu mon élément en mode inspectable
Still_learning
2

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

  1. Vous pouvez utiliser Break On Mutate dans le panneau HTML. (avec cela, vous pourrez également savoir de quel élément il s'agit)
  2. Vous pouvez cliquer avec le bouton droit sur l'élément et choisir Inspecter l'élément avec Firebug

Vous voudrez peut-être aussi suivre numéro 551 , qui demande un moyen de bloquer temporairement des événements spécifiques.

Éditer:

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

Sébastien

Sebastian Zartner
la source
Chrome a également un inspecteur décent. Le problème est - un clic droit sur l'élément le fait disparaître dans mon cas. Chrome a également Break sur DOM mutate. Le problème avec ceci - je ne sais pas de quel élément il s'agit car il est généré dynamiquement
lukas.pukenis
1
Je viens de modifier ma réponse pour donner un indice sur la façon de savoir de quel élément il s'agit.
Sebastian Zartner
2

Dans mon cas, j'ai utilisé l' option Développer récursivement sur Google Chrome:

Les étapes sont:

  1. Inspectez le champ déroulant
  2. Trouvez le DOM dynamique (le surlignage violet)
  3. Cliquez avec le bouton droit de la souris sur ce DOM dynamique
  4. Choisissez Développer récursivement : entrez la description de l'image ici
  5. On voit que tous les éléments sont là

Voici une démo:

entrez la description de l'image ici

Raja David
la source
2

Survolez l'élément avec votre souris et appuyez sur F8 (ceci dans Chrome) pour interrompre l'exécution du script. L'état de survol restera visible pour vous.

Cela vous amène à l'onglet sources. Revenez à l'onglet Éléments. Ce code temporel ne disparaîtra pas.

Vivekanand Panda
la source
0

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

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

matpol
la source
1
Oui. J'ai déclaré que les changements se produisaient trop rapidement dans le DOM et que la page modifiait fortement le DOM, donc ce n'est vraiment pas une solution car je ne suis pas en mesure de distinguer mes éléments nécessaires d'un tas de modifications partout :)
lukas.pukenis
vous pouvez essayer de tracer ce qui se passe en utilisant console.log, par exemple au début de la fonction que vous essayez de vérifier, vous pouvez afficher l'objet css etc. Ou ralentir les changements jusqu'à ce que vous sachiez qu'ils fonctionnent correctement, puis changez la vitesse à ce que vous veux que ce soit par exemple cacher ('lent') dans jquery
matpol
Le problème est - ce n'est pas ma propre base de code, c'est une base de code héritée, grande, ancienne où une simple recherche dans les fichiers ne me donne rien .. :)
lukas.pukenis
vous pouvez également afficher les fichiers utilisés par la page dans l'inspecteur. Je passerais par les supprimer jusqu'à ce qu'il se brise, puis je regardais le fichier qui l'a cassé et je partirais de là. Vous pouvez également rechercher les fichiers réels.
matpol
2
que diriez-vous de ceci: stackoverflow.com/questions/10213703/…
matpol
0

J'ai eu le même problème mais j'utilise Firefox, il disparaît dès que j'ouvre l'élément inspect a 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

Hani Yassine
la source