web-dev-qa-db-fra.com

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

J'essaie de voir, à l'aide des outils de développement de Chrome, la structure des info-bulles sur un site. Cependant, même lorsque je survole l'élément, lorsque j'inspecte un élément, rien ne s'affiche pour l'info-bulle dans le code HTML. Je sais que je peux définir le style sur :hover, mais je ne vois toujours pas le code HTML ou CSS de l'info-bulle. 

Des idées?

htmlcsshovergoogle-chrome-devtools
65
Skitterm

J'ai en fait trouvé un truc pour le faire avec les info-bulles de Twitter Bootstrap. Si vous ouvrez les outils de développement (F12) sur un autre moniteur, passez ensuite la souris sur 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 dans une info-bulle du HTML. Ensuite, vous pouvez le regarder comme s'il s'agissait d'un autre élément. Si vous retournez dans Chrome, le code HTML disparaît, il faut donc en prendre conscience.

C'est un peu bizarre, mais ça a fonctionné pour moi, alors je me suis dit que je le partagerais.

54
Justin Chmura

Il vous suffira de forcer l'info-bulle à s'afficher en tant que telle.

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

L'info-bulle s'affichera maintenant, quel que soit l'état du survol.

Faites défiler vers le bas près du 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 aussi pour Safari, $0 peut être utilisé comme raccourci pour l'élément sélectionné. Cela semble fonctionner également dans Safari.

$($0).tooltip('show')
60
Adam Grant

Cette solution fonctionne sans aucun code supplémentaire.

Appuyez sur command-option-j pour ouvrir la console. Cliquez sur le bouton ressemblant à une 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 l'affichage, appuyez sur command-` lorsque 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 Eléments. 

58
joeyyang

F8 mettra en pause le débogage. 

Passez la souris sur l'info-bulle et appuyez sur F8 pendant son affichage. 

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

46
dwjohnston

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

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

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

  2. Surligner l'élément avec l'inspecteur

  3. Hit F12

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

19
mikemaccana

Réponse à fenêtre unique, sans codage

Aucune des autres réponses n’est tout à fait juste, ni assez détaillée, alors voici ma tentative.

  • Ouvrez les outils de développement de Chrome à l’aide de F12/Ctrl + Maj + I (Windows/Linux) ou de Commande + Option + I (Mac).
  • Sélectionnez l'onglet Sources dans la fenêtre de DevTools.
  • À l'aide de la souris, survolez l'élément à inspecter pour afficher l'info-bulle.
  • 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 "En pause dans le débogueur" apparaît.
  • Dans la fenêtre de DevTools, sélectionnez l'onglet Elements .
  • Pour les info-bulles Bootstrap, l'info-bulle apparaîtra comme le dernier <div> dans le <body>
6
TobyLL

Pas de 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", cliquez avec le bouton droit de la souris sur cet élément DOM conteneur, puis choisissez "Interrompre"> "Modifications de la sous-arborescence". La prochaine fois que vous survolerez la partie du DOM dans laquelle l'info-bulle est logée, le code JS sera mis en pause, ce qui vous permettra d'inspecter le contenu de celle-ci. 

2
clhenrick

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 ne disparaît que 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.

2
lxg

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 affiche l'info-bulle, puis en faisant un clic 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 devrait toujours être là.

0
Nolan Lindeke

Cliquez sur f12 allez sur l'onglet console et ajoutez ce qui suit:

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

Cela vous donnera 5 secondes pour faire ce que vous voulez et cela cassera à 5 seconds. Ensuite, vous pouvez inspecter l'élément cible

0
Ali Kleit

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

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

3) Placez maintenant la souris sur l'élément à inspecter et maintenez votre souris dessus.

4) Utiliser le clavier (Tab ou Maj + Tab) pour déplacer le contrôle sur le bouton de pause ou sur F8 Voir l'image

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

0
Rajan

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

1 - Ouvrez les outils de développement à l’aide de F12.

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

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

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

Set a Break on parent element

5 - Enfin, retournez à l'application et faites apparaître l'info-bulle. Il devrait bloquer l'exécution après que l'info-bulle soit visible

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

0
Ricardo Magalhães

J'ai eu des problèmes avec cela alors je suis allé à la documentation et j'ai inspecté l'info-bulle 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.

0
philip

Dans Chome sous 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 (Inspecteur HTML). Lorsque vous vous déplacez au-dessus du conseil, la fenêtre de développement affiche la section appropriée.

Si vous souhaitez garder l’info-bulle ouverte lorsque vous la souris, vous pouvez l'inspecter de manière plus approfondie dans l'autre fenêtre, puis cliquer avec le bouton droit de la souris sur l'info-bulle, quitter le menu contextuel et cliquer sur la fenêtre des outils de développement. Dans ce scénario, il laisse la pointe dans la fenêtre de Wikipedia.

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

0
user1806949