web-dev-qa-db-fra.com

Comment puis-je inspecter un élément html qui disparaît de DOM lorsque le focus est perdu?

J'essaie d'inspecter les propriétés CSS à partir d'une entrée dans une cellule de tableau. L'entrée apparaît au clic et disparaît lorsque la focalisation est perdue, comme lorsque j'essaie de l'inspecter. Comment puis-je le faire pour ne pas perdre le focus pendant que je passe à une autre fenêtre (l'inspecteur)?

htmlcssdom
87
Rogelio

Dans Chrome, ouvrez les outils de développement et sélectionnez onglet Éléments, puis ouvrez le menu contextuel du noeud parent de l'élément à inspecter, cliquez sur le menu contextuel. on Interruption> modifications de sous-arborescence.

Ensuite, il vous suffit de cliquer sur la page pour accéder à l'inspecteur sans perdre le focus ni l'élément à inspecter.

89
Rogelio

Vous pouvez capturer l'élément en train de disparaître si vous suspendez l'exécution de JavaScript avec un raccourci clavier sans déplacer la souris. Voici comment procéder dans Chrome:

  1. Ouvrez les outils de développement et accédez à Sources.

  2. Notez le raccourci pour suspendre l'exécution du script—F8.

    Pause script execution

  3. Interagissez avec l'interface utilisateur pour que l'élément apparaisse.

  4. Frappé F8.
  5. Comment vous pouvez déplacer votre souris, inspecter le DOM, peu importe. L'élément restera là.

Cette astuce fonctionne également dans Firefox et d'autres navigateurs modernes.

65
mxxk

Si tout échoue, tapez ceci dans la console:

setTimeout(() => { debugger; }, 5000)

Ensuite, vous disposez de 5 secondes (ou modifiez la valeur pour autre chose) pour que tout ce que vous souhaitez déboguer apparaisse.

Aucune des autres réponses n’a fonctionné pour moi - l’arborescence DOM a continué à être modifiée (c’est-à-dire que tout ce qui me tient à cœur a disparu) à droite avant la pause du script.

29
Nick Farina

Vous ne savez pas si cela fonctionne dans votre cas, mais normalement (et dans tous les cas, il convient de le mentionner car c’est un excellent outil) dans Chrome Developer Tools, vous pouvez simuler des états :focus.

Pour ce faire, accédez à l'onglet Elements des outils de développement et assurez-vous d'être dans la section Styles de droite (il doit s'agir de l'emplacement par défaut lorsque vous démarrez les outils de développement). Maintenant que les styles dans le coin en haut à droite vous avez une icône Toggle Element State. Lorsque vous cliquez dessus, vous pouvez simuler :active, :hover, :focus et :visited pour l'élément sélectionné à gauche dans la vue code.

enter image description here

11
Dumba F.

Dans Chrome sur la page des outils de développement pour la page à tester ... cliquez sur le menu d'options et ouvrez les paramètres pour les préférences ... sous DevTools, activez "Emuler une page ciblée".

Ensuite, dans la page de test, les éléments apparaissent. Cela a permis de conserver mes résultats de recherche contextuels et de rester à l’écran pour que je puisse travailler avec.

7
user10864281

Pas une vraie solution, mais cela fonctionne habituellement (:

  1. Focaliser l'élément
  2. Clic droit pour le menu contextuel
  3. Descendre aux outils de développement

Inspecting focusable input

7
Dmitry Vyprichenko

Collez le code JavaScript suivant dans la console de développement du navigateur:

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);
1
EdC

J'ai une solution plus rapide car je ne suis pas très bon avec les outils, voici ce que je fais.

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();
0
Himanshu Pant