web-dev-qa-db-fra.com

Gel de l'écran dans le panneau chrome débogueur / DevTools pour l'inspection contextuelle?

J'utilise l'inspecteur chrome pour essayer d'analyser le z-index d'un compte Twitter bootstrap, et le trouve extrêmement frustrant ...

Existe-t-il un moyen de geler le popover (pendant l'affichage) 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.

cssgoogle-chromegoogle-chrome-devtools
314
Abram

ça marche. Voici ma procédure:

  1. Accédez à la page souhaitée
  2. Ouvrez la console de développement - F12 sous Windows/Linux ou option + ⌘ + J sur OSX
  3. Sélectionnez l'onglet Sources dans l'inspecteur chrome.
  4. Dans la fenêtre du navigateur Web, survolez l'élément souhaité pour lancer le popover.
  5. Frappé F8 sous Windows/Linux (ou fn + F8 sur OSX) pendant que la popover est affichée. Si vous avez cliqué n'importe où sur la page actuelle, F8 ne fera rien. Votre dernier clic doit se trouver quelque part dans l'inspecteur, comme l'onglet Sources
  6. Accédez à l'onglet Elements dans l'inspecteur.
  7. Trouvez votre popover (il sera imbriqué dans le code HTML de l'élément déclencheur)
  8. Amusez-vous à modifier le CSS
612
Abram

Pour pouvoir inspecter un é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 fera irruption dans le débogueur dans 5 secondes.

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

  • Allez montrer votre élément (en survolant ou de toute façon) et attendez que Chrome fasse irruption dans le débogueur.

  • Cliquez maintenant sur l'onglet Elements dans l'inspecteur Chrome. Vous pourrez y rechercher votre élément.
  • Vous pouvez également cliquer sur l’icône Find Element (qui ressemble à une loupe) et Chrome vous laissera aller inspecter et trouver votre élément sur la page en faisant un clic droit dessus, puis choisir Inspect Element

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

221
Brad Parks

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

lancez setTimeout(function(){debugger;},5000);, puis allez montrer votre élément et attendez qu'il soit détecté par 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 ça aide quelqu'un!

  1. Aller à l'onglet éléments dans l'inspecteur
  2. Cliquez avec le bouton droit de la souris sur <body> et cliquez sur " Modifier en tant que HTML ".
  3. Ajoutez l'élément suivant après <body> puis appuyez sur Ctrl + Entrée:
    <div id="debugFreeze" data-Rand="0"></div>
  4. Cliquez avec le bouton droit sur ce nouvel élément et sélectionnez "Interrompre le ..." -> "Attributs modifications"
  5. Maintenant, allez à Console et lancez la commande suivante:
    setTimeout(function(){$("#debugFreeze").attr("data-Rand",Math.random())},5000);
  6. Retournez maintenant dans la fenêtre du navigateur et vous disposez de 5 secondes pour trouver votre élément et cliquer sur/survoler/focus/etc.
  7. Vous pouvez maintenant inspecter votre élément cliqué/survolé/concentré/etc. en paix.

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

51
frzsombor
  1. Faites un clic droit n'importe où dans l'onglet Eléments
  2. Choisir Breakon... >subtree modifications
  3. Déclenchez le popup que vous voulez voir et il gèlera s'il voit des changements dans le DOM
  4. Si vous ne voyez toujours pas la fenêtre contextuelle, cliquez sur le bouton Step over the next function(F10) à côté de Resume(F8) en haut au centre de la page chrome jusqu'à ce que vous figiez la fenêtre à afficher.
30
Adrian Enriquez

J'ai trouvé que cela fonctionne vraiment bien dans Chrome.

Cliquez avec le bouton droit de la souris sur l'élément à inspecter, puis cliquez sur Forcer l'état de l'élément> Survol. Capture d'écran ci-joint.

Force element state

12
Leah Huyghe

Mon moyen simple:

setTimeout(function(){ debugger; }, 3000);
1
Nadav B