Comment puis-je inspecter un élément html qui disparaît du DOM en cas de perte de focus?

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 en cas de perte de mise au point, comme lorsque j'essaye de l'inspecter. Comment puis-je faire pour ne pas perdre le focus pendant que je passe à une autre fenêtre (l'inspecteur)?

Dans le navigateur Chrome, ouvrez Developer Tools et sélectionnez l' onglet Eléments , puis ouvrez le menu contextuel du nœud parent de l'élément que vous souhaitez inspecter, dans le menu contextuel cliquez sur Break on > Subtree modifications .

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

Vous pouvez capturer l'élément qui disparaît 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 aux sources.

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

   

3. Interagissez avec l'interface utilisateur pour faire apparaître l'élément.

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

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

Si tout le reste échoue, saisissez ceci dans la console:

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

Ensuite, vous avez 5 secondes (ou changez la valeur en autre chose) pour faire apparaître ce que vous voulez déboguer.

Aucune des autres réponses n'a fonctionné pour moi - l'arborescence DOM continuait à être modifiée (c'est-à-dire que les choses qui m'intéressaient ont disparu) juste avant la pause du script.

Je ne sais pas si cela fonctionne dans votre situation, mais normalement (et dans tous les cas, il convient de le mentionner à cet égard car c'est un excellent outil) dans les outils de développement Chrome, vous pouvez simuler les états des éléments et l'un d'eux l'est également :focus.

Pour ce faire, accédez à l' Elementsonglet dans les outils de développement et assurez-vous que vous êtes dans la Stylessection de droite (cela devrait être l'emplacement par défaut lorsque vous démarrez les outils de développement). Maintenant, juste sous les styles dans le coin supérieur droit, vous avez une icône Toggle Element State. Lorsque vous cliquez dessus , vous pouvez simuler :active, :hover, :focuset :visitedpour l'élément que vous avez sélectionné sur la gauche dans votre code de vue.

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

Ensuite, dans la page de test, faites apparaître les éléments. Cela a fonctionné pour que mes résultats de recherche contextuels restent concentrés à l'écran afin que je puisse travailler avec.

Ce n'est pas une vraie solution, mais cela fonctionne généralement (:

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

J'ai eu une situation très difficile et aucune réponse ne fonctionnait à partir d'ici (je n'ai pas vérifié les réponses en changeant le conteneur, qui est le corps pour moi, ou l'événement d'origine, car je ne le sais pas). J'ai finalement trouvé une solution de contournement en passant par les points d'arrêt de l'écouteur d'événements de contrôle dans Chrome Inspector. C'est peut-être aussi une façon de casser avec plusieurs navigateurs pour des situations compliquées où même F8 ou un clic droit de la souris masquent à nouveau la fenêtre contextuelle:

Collez le Javascript suivant dans la console développeur 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);

J'ai une solution plus rapide car je ne suis pas très doué pour l'utilisation des outils, voici ce que je fais.

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

Si vous ouvrez Chrome DevTools, puis déclenchez l'inspecteur d'éléments à l'aide de raccourcis clavier, cela devrait résoudre le problème.

Mac: Cmd+Opt+J puisCmd+Opt+C

Windows: Ctrl+Shift+J puisCtrl+Shift+C

[