Geler l'écran dans le débogueur chromé / panneau DevTools pour une inspection popover?

394

J'utilise l'inspecteur de chrome pour essayer d'analyser le z-indexpopover d'un bootstrap twitter, et je trouve cela extrêmement frustrant ...

Existe-t-il un moyen de geler le popover (pendant qu'il est affiché) afin que je puisse évaluer et modifier le CSS associé?

Placer un «survol» fixe sur le lien associé ne fait pas apparaître le popover.

css google-chrome google-chrome-devtools Abram
la source
7
Essayez de définir un point d'arrêt dans votre JavaScript immédiatement après l' debugger;
affichage de
5
J'utilise window.setTimeoutpour déclencher debuggeren 5 secondes, puis survoler l'élément et attendre.
grimmdude
Bonjour, rédacteur technique DevTools ici. Pouvez-vous tous m'envoyer des MVCE démontrant le problème? À partir de 2019, nous avons quelques outils qui devraient faire l'affaire ( points d'arrêt de l'écouteur d'événements , basculements de pseudo-classe ) mais je ne peux pas fournir de réponse détaillée jusqu'à ce que je puisse reproduire votre situation.
Kayce Basques
Vous pouvez trouver une autre solution ici pour Chrome et Firefox
Muhammed AbdElFatah
@KayceBasques Voici un exemple: telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist Cliquez sur la liste déroulante pour l'ouvrir, puis essayez d'inspecter le popover du contenu de la liste dans la vue Elements.
RMorrisey

Réponses:

704

Je l'ai fait fonctionner. Voici ma procédure:

  1. Naviguez jusqu'à la page souhaitée
  2. Ouvrez la console de développement - F12sur Windows / Linux ou option+ ⌘+ Jsur macOS
  3. Sélectionnez l' Sourcesonglet dans l'inspecteur de chrome
  4. Dans la fenêtre du navigateur Web, survolez l'élément souhaité pour lancer le popover
  5. Frappez F8sur Windows / Linux (ou fn+ F8sur macOS) pendant que le popover s'affiche. Si vous avez cliqué n'importe où sur la page réelle, F8 ne fera rien. Votre dernier clic doit être quelque part dans l'inspecteur, comme l'onglet sources
  6. Accédez à l' Elementsonglet dans l'inspecteur
  7. Trouvez votre popover (il sera imbriqué dans le HTML de l'élément déclencheur)
  8. Amusez-vous à modifier le CSS
Abram
la source
9
Ce flux de travail m'a donné une introduction courte et utile au débogueur de points d'arrêt et a aidé à isoler un menu qui était difficile à styliser, car il disparaissait au clic de la console.
Trevor Pierce
22
Si l'élément DOM utilise l' événement focusout pour se cacher, vous n'avez aucune chance de toucher F8!
Marcel
2
@Dean pour déclencher F8 que vous devez utiliser fn!
mik01aj
10
Pour plus d'informations, le F8raccourci met en fait en pause le débogueur (exécution de script). Et ctrl + \ fonctionne également. ( cmd + \ sous MacOS).
LeOn - Han Li
1
Ou vous pouvez appuyer F8deux fois
samdd
275

Pour pouvoir inspecter n'importe quel élément, procédez comme suit. Cela devrait fonctionner même s'il est difficile de dupliquer l'état de survol:

  • Exécutez le javascript suivant dans la console. Cela entrera dans le débogueur dans 5 secondes.

    setTimeout(function(){debugger;}, 5000)

  • Allez montrer votre élément (en survolant ou cependant) et attendez que Chrome pénètre dans le débogueur.

  • Maintenant, cliquez sur l' Elementsonglet dans l'inspecteur Chrome, et vous pouvez y rechercher votre élément.
  • Vous pouvez également cliquer sur l' Find Elementicône (ressemble à une loupe) et Chrome vous permettra d'aller inspecter et trouver votre élément sur la page en faisant un clic droit dessus, puis en choisissantInspect Element

Notez que cette approche est une légère variation de cette autre excellente réponse sur cette page.

Brad Parks
la source
7
je respecte que vous ayez respecté la réponse de frzsombor. agréable.
Jeremy Moritz
4
C'est ce dont j'avais besoin, car la fonctionnalité était due à un élément DOM ajouté sur js Focus et supprimé sur le flou, ce qui se produit toujours lorsque vous passez aux outils de développement.
trudesign
6
La solution F8 d'Abram n'a pas fonctionné pour moi. Celui-ci l'a fait. Merci!
Ralf
3
THX. J'ai fait un signet avec le titre : ❚❚, adresse : javascript:debugger;. F8fonctionne, mais pour ceux qui préfèrent utiliser la souris, cela pourrait être plus pratique.
Tymek
1
Comme d'autres l'ont commenté, la réponse F8 ne fonctionnait pas pour moi et me rendait complètement fou! Cela fonctionne comme un charme. Je vous remercie!
DoYouEvenCodeBro
70

MISE À JOUR: Comme Brad Parks l'a écrit dans son commentaire, il existe une solution bien meilleure et plus facile avec une seule ligne de code JS:

exécuter setTimeout(function(){debugger;},5000);, puis allez montrer votre élément et attendez qu'il pénètre dans le débogueur

Réponse originale:

Je viens d'avoir le même problème et je pense avoir trouvé une solution "universelle". (en supposant que le site utilise jQuery)
J'espère que cela aide quelqu'un!

  1. Accédez à l'onglet des éléments dans l'inspecteur
  2. Faites un clic droit <body>et cliquez sur " Modifier en HTML "
  3. Ajoutez l'élément suivant <body>puis appuyez sur Ctrl + Entrée:
    <div id="debugFreeze" data-rand="0"></div>
  4. Faites un clic droit sur ce nouvel élément, puis sélectionnez "Break on ..." -> "Attributes modifications"
  5. Accédez maintenant à la vue Console et exécutez la commande suivante:
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. Revenez maintenant à la fenêtre du navigateur et vous avez 5 secondes pour trouver votre élément et cliquez / hover / focus / etc avant que le point d'arrêt ne soit atteint et que le navigateur "se fige".
  7. Vous pouvez maintenant inspecter votre élément cliqué / survolé / concentré / etc en toute tranquillité.

Bien sûr, vous pouvez modifier le javascript et le timing, si vous en avez l'idée.

frzsombor
la source
11
Hey! Excellente idée ... vous n'avez même pas besoin d'ajouter la div supplémentaire ... Exécutez simplement ce javascript à la place setTimeout(function(){debugger;}, 5000);, puis allez montrer votre élément et attendez qu'il pénètre dans le débogueur. Cliquez ensuite sur l'onglet "Éléments" dans l'inspecteur Chrome, et vous pouvez y rechercher votre élément. Vous pouvez également cliquer sur l'icône "Rechercher un élément" (ressemble à une loupe) et Chrome vous permettra d'aller inspecter et trouver votre élément sur la page en cliquant avec le bouton droit dessus, puis en choisissant "Inspecter l'élément".
Brad Parks
5
Je pense que vous devriez ajouter ceci comme réponse, parce que cette solution est non seulement meilleure que la mienne, mais meilleure que toutes les autres ici. Vraiment sympa!
frzsombor
38
  1. Cliquez avec le bouton droit n'importe où dans l'onglet Éléments
  2. Choisir Breakon... > subtree modifications
  3. Déclenchez le popup que vous voulez voir et il se fige s'il voit des changements dans le DOM
  4. Si vous ne voyez toujours pas la fenêtre contextuelle, cliquez sur le Step over the next function(F10)bouton à côté Resume(F8)en haut au centre du chrome jusqu'à ce que vous geliez la fenêtre contextuelle que vous souhaitez voir.
Adrian Enriquez
la source
3
MERCI! Je ne connaissais pas celui-ci et ça me sauve
R Claven
14

J'ai trouvé que cela fonctionne très bien dans Chrome.

Cliquez avec le bouton droit sur l'élément que vous souhaitez inspecter, puis cliquez sur Forcer l'état de l'élément> Survoler. Capture d'écran jointe.

Force l'état de l'élément

Leah Huyghe
la source
5
Cela ne fonctionnera que si le popover est déclenché par css.
mik01aj
6

Mettez ceci dans l'onglet console:

setTimeout(function(){debugger;}, 5000)

Cliquez ensuite sur l'endroit où afficher la fenêtre contextuelle, 5 secondes plus tard - l'écran sera figé et amusez-vous à personnaliser CSS.

Parker Lucenzo
la source
0

Ma façon simple:

setTimeout(function(){ debugger; }, 3000);
Nadav B
la source
7
C'est exactement la même que la solution de Brad Parks publiée il y a 3 ans
frzsombor
-2

J'ai essayé les autres solutions ici, elles fonctionnent mais je suis paresseux donc c'est ma solution

  1. survolez l'élément pour déclencher un état étendu
  2. ctrl+ shift+c
  3. survoler à nouveau l'élément
  4. clic-droit
  5. accédez au débogueur

en cliquant avec le bouton droit, il n'enregistre plus d'événement de souris car un menu contextuel apparaît, vous pouvez donc éloigner la souris en toute sécurité

Vincent Tang
la source