Inspecter l'élément survolé dans Chrome?

106

J'essaie de voir, via les outils de développement de Chrome, comment les info-bulles sont structurées sur un site. Cependant, même lorsque je passe la souris sur l'élément, lorsque j'inspecte l'élément, rien ne s'affiche pour l'info-bulle dans le html. Je sais que je peux définir le style sur :hover, mais je ne vois toujours pas le html ou le css de l'info-bulle.

Des idées?

html  css  hover  google-chrome-devtools 
— Skitterm
source
— Muhammed Abdelfattah

Réponses:

80

En fait, j'ai trouvé une astuce pour le faire avec les info-bulles Twitter Bootstrap. Si vous ouvrez les outils de développement (F12) sur un autre moniteur, survolez l'élément pour afficher l'info-bulle, faites un clic droit comme si vous deviez sélectionner «Inspecter l'élément». En laissant ce menu contextuel ouvert, déplacez le focus sur les outils de développement. Le code HTML de l'info-bulle doit apparaître à côté de l'élément pour lequel il s'agit d'une info-bulle dans le HTML. Ensuite, vous pouvez le regarder comme s'il s'agissait d'un autre élément. Si vous revenez à Chrome, le HTML disparaît, il faut donc être conscient.

Un peu bizarre mais cela a fonctionné pour moi, alors j'ai pensé que je le partagerais.

— Justin Chmura
source
12
Eh bien oui, mais pas sur Mac.
— actimel le
2
- Étape 1: Inspectez l'élément qui génère l'info-bulle pour faire apparaître les outils Chrome Dev. - Étape 2: en survolant l'élément, votre info-bulle apparaîtra. Sans quitter l'élément, ouvrez une nouvelle fenêtre (Commande-N sur Mac, Ctrl-N ailleurs) - Étape 3: Faites glisser la nouvelle fenêtre sous l'ancienne fenêtre, de sorte que vous puissiez toujours voir l'info-bulle, puis déplacez votre curseur dans l'inspecteur d'élément . - Étape 4: faites défiler vers le bas, où votre info-bulle est ajoutée au DOM. Cliquez sur l'élément pour voir son style.
— pgblu
2
PS cela ne fonctionne pas pour les info-bulles qui sont générées via Javascript à partir du propre attribut title de l'élément, comme par exemple sur SO. Ces info-bulles utilisent un style par défaut.
— pgblu
Cela m'a aidé pour les info-bulles dans Kendo
— k29
1
L'astuce: allez d'abord dans l'onglet source. Ensuite, vous pouvez mettre en pause Javascript avec le bouton F8. La touche pause est là avec le raccourci F8 / Ctrl + \ (La réponse de @Rajan sur cette page)
— rostamiani
85

Cette solution fonctionne sans aucun code supplémentaire.

Appuyez sur command-option-jpour ouvrir la console. Cliquez sur le bouton en forme de fenêtre dans le coin supérieur droit de la console pour ouvrir la console dans une autre fenêtre.

Ensuite, dans la fenêtre Chrome, survolez l'élément qui déclenche le popover, appuyez sur le command-`nombre de fois où vous devez vous concentrer sur la console, puis tapez debugger. Cela gèlera la page, vous pourrez alors inspecter l'élément dans l'onglet Éléments.

— Joeyyang
source
6
Cette réponse est vraiment sympa. Code minimal, pas de configuration jQuery ou double moniteur.
— uKolka
1
Ça a marché! Initialement en raison d'une mauvaise configuration, je voyais les info-bulles HTML par défaut et non les info-bulles Bootstrap. Après avoir résolu ce problème, votre solution a fonctionné. Merci.
— DFB
2
De plus, si vous perdez le focus lors de l'écriture debuggersur la console, vous pouvez appuyer sur alt+tabtout en survolant l'élément. Cela fonctionnait pour les applications Chromium sur Windows.
— Orcun
1
C'était une excellente réponse!
— Nobita
La page des raccourcis clavier de Chrome DevTools indique qu'il s'agit d'un contrôle + `au lieu de la commande +` pour se concentrer sur la console. Peut-être que ça a changé.
— rinat.io
85

F8 interrompra le débogage.

Passez la souris sur l'info-bulle et appuyez sur F8lorsqu'elle est affichée.

Vous pouvez maintenant utiliser l'inspecteur pour consulter le CSS.

— dwjohnston
source
4
J'aime comment dans Stackoverflow, tant que vous continuez à faire défiler vers le bas, vous trouverez cette très bonne réponse qui est bien meilleure que les autres. C'est simple et facile sans scripts supplémentaires.
— Alexander Dixon
2
F8 n'a pas fonctionné pour moi pour une raison quelconque, mais la pause est également liée à ctrl- \
— Bryan Larsen
Meilleure solution ici
— NiallMitch14
Ni <kbd> F8 </kbd> ni <kbd> AltGr </kbd> - <kbd> RCtrl </kbd> - <kbd> ß </kbd> sur la disposition de mon clavier allemand ne met le débogueur en pause.
— test le
63

Il vous suffit de forcer l'info-bulle à s'afficher comme telle

$('.myelement').tooltip('open');

Désormais, l'info-bulle s'affiche quel que soit l'état du survol.

Faites défiler vers le bas du DOM où vous devriez voir le balisage.

Mise à jour voir le commentaire de cneuro pour Bootstrap 3.

$('.myelement').tooltip('show');

Mise à jour, voir la réponse de Marko Grešak pour Chrome et apparemment Safari également, $0peut être utilisé comme raccourci pour l'élément actuellement sélectionné. Cela semble également fonctionner dans Safari.

$($0).tooltip('show')
— Adam Grant
source
1
$ ('. myelement'). tooltip ('open') est ce qui a fonctionné pour moi.
— tekumara
6
Depuis Bootstrap 3, c'est maintenant .tooltip('show') getbootstrap.com/javascript/#tooltips-methods
— cneuro
2
Dans Chrome, l'élément actuellement sélectionné est accessible comme $0dans la console. Par conséquent, vous pouvez sélectionner l'élément qui déclenche une info-bulle et l'exécuter $($0).tooltip('show').
— Marko Grešak
31

Cliquez sur f12aller dans l'onglet console et ajoutez ce qui suit:

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

Cela vous donnera 5 secondes pour faire ce que vous voulez et cela s'arrêtera 5 seconds. Ensuite, vous pouvez inspecter l'élément cible

(ex. survolez l'élément et attendez 5 secondes puis inspectez ..)

— Ali Kleit
source
Fonctionne également avec Electron.
— xmedeko
24

Pour moi, la réponse acceptée n'a pas fonctionné: cliquer dans DevTools a immédiatement fermé l'info-bulle.

Cependant, j'ai trouvé /superuser/249050/chrome-keyboard-shortcut-to-pause-script-execution qui m'a aidé:

  1. Dans la console :, Exécutez:
    const F12 = 123
    window.addEventListener('keydown', function(event) { 
      if (event.keyCode === F12 ) {
        debugger; 
      }
    });

  1. Mettre en évidence l'élément avec l'inspecteur

  2. Frapper F12

Vous pouvez maintenant inspecter l'élément, avec JavaScript en pause pour que le DOM ne change pas.

— Mikemaccana
source
1
Intelligent ! Exactement ce que je cherchais. Merci :) Bien que cela ne fonctionne pas avec F12 avec ma configuration pour une raison quelconque, j'ai donc utilisé keyCode == 13 et appuyé sur ENTER.
— Jeremy F.
2
excellente solution! Je suggérerais de sauvegarder cet extrait utile dans la zone SOURCE -> SNIPPETS de chrome afin que vous puissiez l'exécuter avec juste un double clic;)
— Magico
1
Cette solution est bien supérieure à celle acceptée. Je vais en faire un bookmarklet!
— Lulu
1
Excellente solution. Très intelligent.
— Charlie Dalsass
1
Parfait. Devrait être la bonne réponse / acceptée!
— Brosig
10

Réponse à guichet unique, sans codage

Aucune des autres réponses n'est tout à fait correcte ou n'a pas assez de détails, alors voici ma tentative.

  • Ouvrez les DevTools de Chrome en utilisant F12 / Ctrl + Maj + I (Windows / Linux) ou Commande + Option + I (Mac).
  • Sélectionnez l' onglet Sources dans la fenêtre DevTools.
  • À l'aide de la souris, passez la souris sur l'élément que vous souhaitez inspecter pour rendre l'info-bulle visible.
  • Appuyez sur F8 (Windows / Linux / Mac) pour suspendre l'exécution du script. La fenêtre principale est grisée et une fenêtre contextuelle "Paused in debugger" apparaît.
  • Dans la fenêtre DevTools, sélectionnez l' onglet Elements
  • Pour les info-bulles Bootstrap, l'info-bulle apparaîtra comme la dernière <div>de la<body>
— TobyLL
source
5

Aucune solution de code pour les info-bulles activées par JS:

Avec les outils de développement de Chrome, inspectez l'élément contenant / parent de l'info-bulle. Dans l'onglet "éléments", faites un clic droit sur cet élément du DOM conteneur puis choisissez "break on"> "subtree modifications". La prochaine fois que vous survolez la partie du DOM dans laquelle l'info-bulle est hébergée, le code JS sera mis en pause, ce qui vous permettra d'inspecter le contenu de l'info-bulle.

— Clhenrick
source
4

Suivez ces étapes

  1. Ouvrez la Inspectfenêtre en chrome.

  2. Placez la souris sur l'info-bulle.

  3. presse F8

    L'exécution JS sera interrompue et vous pourrez ensuite consulter l'info-bulle.

  4. Appuyez à F8nouveau pour démarrer l'exécution et F10pour déboguer.

— Parvez Ahmed
source
2

Voici une solution simple: si vous avez des info-bulles dynamiques, vous pouvez les rendre «persistantes» en modifiant (temporairement) l'événement déclencheur en click. Cela aura pour effet que l'info-bulle disparaîtra uniquement lors d'un clic:

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

De cette façon, il peut être facilement inspecté avec les outils de débogage de FF ou de Chrome.

— lxg
source
2

1) Ouvrez la fenêtre Inspecter en cliquant sur F12

2) Accédez à l'onglet source (à côté de la console)

3) Survolez maintenant l'élément à inspecter et gardez votre souris là-bas.

4) Utilisation du clavier (Tab ou Maj + Tab) pour déplacer le contrôle vers le bouton pause ou F8 Reportez-vous à l'image

5) Lorsque le focus clavier est sur le bouton Lecture. Appuyez sur Entrée. Votre élément de survol sera gelé, vous pouvez tout faire maintenant

— Rajan
source
1

il est si simple de modifier ces info-bulles.

Étape 1 : Inspectez l'élément contenant l'info-bulle. Assurez-vous qu'il est surligné en bleu dans devtools.

Étape 2 : faites un clic droit sur l'élément (dans la partie devtools) et sélectionnez: modifications d'attributs, sous Pause sur entrez la description de l'image ici

Étape 3 : Survolez l'élément inspecté et une superposition grise apparaîtra sur le site avec un petit texte: En pause dans le débogueur

entrez la description de l'image ici

en haut de votre écran

Étape 4 : Cliquez sur la flèche bleue jusqu'à ce que l'état de survol soit sélectionné.

Étape 5 : Inspectez et modifiez l'info-bulle

— Catalin
source
0

J'ai eu des problèmes avec cela, alors je suis allé à la documentation et j'ai inspecté l'info-bulle qui est déjà affichée sur la page. Cela m'a aidé à voir la structure dom de l'info-bulle et à la modifier en conséquence.

— Philippe
source
0

Dans Chome sur Linux, cela peut être réalisé pour les info-bulles générées par JS, telles que celles des références sur WikiPedia, en procédant comme suit:

Comme indiqué ci-dessus, ouvrez les outils de développement à l'aide de F12. Ouvrez-les dans une autre fenêtre. Mettez en surbrillance l'info-bulle et cliquez sur Ctrl-Maj-C (l'inspecteur HTML). Au fur et à mesure que vous vous déplacez sur la pointe, la fenêtre de développement affichera la section appropriée.

Si vous avez besoin de garder l'info-bulle ouverte lorsque vous la désactivez, pour pouvoir l'inspecter plus en détail dans l'autre fenêtre, cliquez avec le bouton droit sur l'info-bulle et laissez le menu contextuel en place, puis cliquez sur la fenêtre des outils de développement. Dans ce scénario, il laisse la pointe dans la fenêtre wikipedia.

Dans une certaine mesure, cela fonctionne également avec des astuces bootstrap.

— user1806949
source
0

Pour une raison quelconque, les réponses fournies ici ne fonctionnaient pas pour moi sous Windows. J'ai pu inspecter l'info-bulle en ouvrant les outils de développement, puis en survolant l'élément qui fait apparaître l'info-bulle, puis en cliquant avec le bouton droit sur cet élément (pas l'info-bulle). Ensuite, déplacez le curseur dans le panneau de l'inspecteur et faites défiler vers le bas. L'élément d'info-bulle doit toujours être là.

— Nolan Lindeke
source
0

Les outils de développement permettent d'inspecter un élément survolé comme une info-bulle.

1 - Ouvrez les outils de développement en utilisant F12.

2 - Sélectionnez l'onglet "Eléments".

3 - Sélectionnez l'élément parent contenant l'info-bulle.

4 - Cliquez sur "..." (sur la ligne de l'élément parent) et après sélectionnez "Break on" / "subtree modifications" (voir image ci-dessous)

Définir une pause sur l'élément parent

5 - Revenez enfin à l'application et faites apparaître l'info-bulle. Il devrait bloquer l'exécution une fois que l'info-bulle est visible

J'espère que cela peut être utile pour quelqu'un!

— Ricardo Magalhães
source
0

Une autre solution que j'ai trouvée pour ce problème. Dans la vue Mobile ou Tablette dans Chrome, appuyez sur Crt + Maj + M dans les outils de développement Chrome pour la vue Mobile dans Chrome. Cliquez (Tap) sur ToolTip div et vous pouvez l'inspecter avec un clic droit sur l'info-bulle

— HERAwais
source
0

Appuyez sur command-option-jpour ouvrir la console. Cliquez sur le bouton en forme de fenêtre dans le coin supérieur droit de la console pour ouvrir la console dans une autre fenêtre.

Ensuite, dans la fenêtre Chrome, survolez l'élément qui déclenche le popover, appuyez sur le command-nombre de fois où vous devez vous concentrer sur la console, puis tapez debugger. Cela gèlera la page; vous pouvez ensuite inspecter l'élément dans l'onglet Eléments.

— Okau123
source
0

Voici comment je l'ai fait sur Mac:

  1. Passez la souris sur l'élément contenant une info-bulle avec les outils de développement Chrome ouverts.
  2. Attendez que l'info-bulle apparaisse.
  3. Ouvrez la palette de commandes devtools avec un raccourci clavier. Cmd+Shift+Ptravaillé pour moi.
  4. Tapez Disable JavaScriptet appuyez surEnter

Cela évitera de décolorer toutes les infobulles qui utilisent JavaScript.

— savchenkoto
source
-1

Il convient de noter que le basculement de l'état: hover à partir des outils de développement n'a un impact que si le texte d'indication est activé via les règles CSS: hover en premier lieu. La bascule applique uniquement l'état de survol à l'élément à des fins de rendu, mais ne déclenche pas d'événement de survol JavaScript correspondant.

De nombreux frameworks tels que AngularJS attachent dynamiquement le HTML de l'info-bulle au bas du corps du document via JavaScript lorsqu'un élément cible est survolé, de sorte que toute quantité de survol et d'inspection de l'élément cible n'aidera pas.

La réponse de @ joeyyang a très bien fonctionné pour moi dans ce scénario.

— John Rix
source
-2

L'un des moyens les plus simples que j'ai trouvés est:

  1. Ouvrez les outils de développement Chrome sur le côté

  2. Survolez l'élément

  3. Clic-droit

  4. Cliquez sur les outils de développement

  5. Vous pouvez maintenant inspecter et modifier les styles

— Kaspars Siricenko
source
Cela n'est pas utile @Kaspars
— Es Noguera
@EsNoguera pourrait être plus précis pourquoi. C'est ainsi que cela a fonctionné pour moi. Depuis que j'ai trouvé une méthode qui a fonctionné, pourquoi il est mauvais d'être suggéré?
— Kaspars Siricenko le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.