Осмотрите Javascript Hover в инструментах разработчика Chrome

У меня есть Javascript, который отображает элемент при наведении. Я хочу стилизовать этот элемент и, следовательно, вам нужно вызвать состояние зависания в браузере с помощью инструментов Chrome Dev.

Это легко сделать с CSS, где вы можете установить состояние элемента в Dev Tools. Каков наилучший способ сделать это с помощью Javascript?

Пример кода:

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

    function() {
        $('#dropdown').hide();
    }
);

Ответ 1

Возьмите нижеприведенный фрагмент меню, в котором показано выпадающее меню:

$('#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>

Ответ 2

Другой альтернативой было бы навести курсор мыши на элемент с помощью мыши и нажать F8 (это будет работать только в Chrome), чтобы приостановить выполнение script. Состояние зависания останется видимым для вас.

Ответ 3

Откройте инструменты разработчика, нажав F12 и щелкните состояние переключателя в правом верхнем углу. Здесь вы можете активировать состояние зависания

Update: Вы можете активировать события наведения/наведения мыши/мыши, например, на событие click:

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

Ответ 4

В соответствии с другими ответами вы можете приостановить выполнение JS с помощью ярлыков DevTools; однако для этого вам нужно сосредоточиться на окне DevTools. Если вам нужно приостановиться без фокуса в окне DevTools, вы можете привязать оператор debugger к событию нажатия клавиши, например:

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

Запуск этого фрагмента в консоли добавит слушатель, который приостанавливает выполнение кода при нажатии F12.

Ответ 5

В то время как ответ @missemm является наиболее простым, еще одна полезная опция в Chrome - это (с уже открытой панелью инструментов dev) вызвать меню, затем щелкнуть правой кнопкой мыши на элементе, который вы хотите проверить, и выбрать опцию "View Source Source" из Dev Tools. меню. Это открывает другое окно и удаляет фокус из окна, которое вы проверяли, поэтому, если меню прослушивает событие указателя, оно не будет запущено. Просто закройте вкладку "Источник страницы", и пока вы держите мышь подальше от исходного окна просмотра окна, меню останется открытым, но вы все равно можете использовать панель инструментов разработчика.

Это иногда более удобно, если вам обычно нужно одновременно нажимать "fn" и "f8" (это растягивание одной рукой).