web-dev-qa-db-fra.com

Inspectez le survol de Javascript dans Chrome Outils de développement

J'ai du Javascript qui affiche un élément en survol. Je veux styliser cet élément et j'ai donc besoin de déclencher l'état de survol dans le navigateur à l'aide de Chrome Dev Tools.

C'est facile à faire avec CSS où vous pouvez définir l'état d'un élément dans Dev Tools. Quelle est la meilleure façon de le faire avec Javascript?

Exemple de code:

$('#menu').hover(
    function() {
        console.log('test');
        $('#dropdown').show();
    },

    function() {
        $('#dropdown').hide();
    }
);
javascriptjquerygoogle-chrome-devtools
26
raison

Prenez l'extrait ci-dessous d'un menu qui affiche une liste déroulante en survol:

$('#menu').hover(
  function() {
    $('#dropdown').show();
  }, function() {
    $('#dropdown').hide();
  }
);
#menu {
  width: 100px;
  background-color: #03f;
  color: #fff;
  padding: 2px 5px;
}
#dropdown {
  width: 100px;
  background-color: #03f;
  color: #fff;
  padding: 2px 5px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu">menu</div>
<div id="dropdown">
  <ul>
    <li>menu item 1</li>
    <li>menu item 2</li>
    <li>menu item 3</li>
  </ul>
</div>

Copiez cet extrait dans un document local, car Chrome Dev Tools ne vous permettra pas d'utiliser Javascript pour sélectionner un élément dans cet iframe. Ensuite, dans votre Dev Tools Console, exécutez:

$('#menu').trigger('mouseover');

Cela affichera le menu déroulant, qui a une liste vraiment laide et sans style. Maintenant, au lieu d'utiliser votre souris pour faire un clic droit sur l'élément et sélectionner "Inspecter l'élément", ce que j'imagine est la façon dont vous êtes habitué à faire les choses, exécutez dans votre console:

$('#dropdown');

Ou quel que soit le sélecteur pour l'élément que vous souhaitez styliser/manipuler. La console affichera le résultat de votre instruction, qui est l'objet jQuery pertinent. Maintenant, faites un clic droit sur cet objet dans votre console et sélectionnez Révéler dans le panneau des éléments. Vous pouvez maintenant utiliser l'onglet Styles comme vous en avez l'habitude, et votre souris n'a jamais déclenché l'événement mouseout, mettant fin au survol.

9
T Nguyen

Une autre alternative serait de survoler l'élément avec votre souris et d'appuyer sur F8 (cela ne fonctionnera que dans Chrome) pour suspendre l'exécution du script. L'état de vol stationnaire restera visible pour vous.

36
mrbut

Ouvrez les outils de développement en appuyant sur F12 et cliquez sur l'état de l'élément à bascule dans le coin supérieur droit. Ici, vous pouvez activer l'état de vol stationnaire

Toggle the Hover

pdate: Vous pouvez déclencher les événements hover/mouseover/mouseenter sur disons que c'est un événement click:

$("#menu").click(function() {    
    $(this).trigger("mouseover");    
    $(this).trigger("hover");    
    $(this).trigger("mouseenter"); 
});
10
Fueled By Coffee

Alors que la réponse de @missemm est la plus simple, une autre option utilisable dans Chrome est (avec le panneau des outils de développement déjà ouvert) déclenche le menu, puis faites un clic droit sur l'élément que vous souhaitez inspecter et choisissez l'option "Afficher la source de la page" dans le menu Outils de développement. Cela ouvre une autre fenêtre et supprime le focus de la fenêtre que vous inspectiez, donc si le menu écoute un événement de pointage, il ne sera pas déclenché. Fermez simplement la source de la page et tant que vous gardez votre souris éloignée de la fenêtre d'origine, le menu reste ouvert, mais vous pouvez toujours utiliser le panneau des outils de développement.

Cela est parfois plus pratique si vous devez normalement appuyer sur 'fn' et 'f8' en même temps (ce qui est un étirement à faire d'une seule main).

0
tv13

Selon les autres réponses, vous pouvez suspendre l'exécution de JS via les raccourcis DevTools; cependant, vous devez vous concentrer sur la fenêtre DevTools pour que cela fonctionne. Si vous devez faire une pause sans vous concentrer sur la fenêtre DevTools, vous pouvez lier une instruction debugger à un événement de pression de touche comme ceci:

document.addEventListener('keydown', e => { if (e.keyCode == 123) debugger; })

L'exécution de cet extrait dans la console ajoutera un écouteur qui suspend l'exécution du code lorsque vous appuyez sur F12.

0
Ian deBoisblanc