Осмотреть элемент, который появляется только тогда, когда другой элемент наводится на мышь или вводится

Часто я хочу проверять элемент (например, всплывающую подсказку), который появляется только тогда, когда другой элемент мыши наводится/вводится. Элемент, который появляется, становится видимым через событие jQuery mouseenter.

Я не могу проверить подсказку, так как всплывающая подсказка исчезает, когда моя мышь покидает содержащий элемент.

Есть ли способ приостановить JS-события, чтобы я мог навести курсор на элемент, а затем приостановить браузер JS и успешно проверить его?

В качестве примера попробуйте проверить подсказки для бутстрапа Twitter: http://getbootstrap.com/javascript/#tooltips.

Ответ 1

Это довольно легко в Chrome 38.0.2094.0.

Вот как это будет выглядеть:

Шаг за шагом:

Откройте DevTools на панели "Источники".
Создайте всплывающую подсказку, наведя курсор на кнопку
Нажмите F8, чтобы заморозить страницу
Перейдите на панель Элементы и используйте значок увеличительного стекла в левом верхнем углу, чтобы выбрать всплывающую подсказку

Если всплывающая подсказка появляется из-за CSS, вот что вы можете сделать в этом случае:

Шаг за шагом:

Откройте DevTools
Выберите элемент запуска в инструментах dev (ссылка)
Щелкните правой кнопкой мыши и выберите "Force element state" и выберите ": hover"
Осмотреть всплывающую подсказку CSS

Ответ 2

Оба Safari и Chrome Web Inspector предлагают флажки, в которых вы можете переключать состояния элемента :active, :focus, :hover и :visited. Использование этих функций может быть еще проще.

Safari:

Chrome:

Ответ 3

Есть и другой сложный способ сделать это:

Перейдите к элементу, который отобразит вашу подсказку.
Щелкните правой кнопкой мыши, чтобы открыть контекстное меню.
Переместите мышь в окно инструмента вашего разработчика и щелкните левой кнопкой мыши в любом месте панели инструментов dev.

Ваша всплывающая подсказка останется видимой, после чего вы сможете ее осмотреть на вкладке Элемент.

Протестировано в Chrome. Кажется, что не работает в Firefox.

Ответ 4

Хотя @SomeGuy answer отлично (t-up для анимированных gif), в качестве альтернативы вы всегда можете делать это программно. Просто откройте консоль и введите имя события

document.getElementById('id').dispatchEvent(new Event('event-type'));

(с чистым синтаксисом javascript может отличаться в зависимости от браузера)

Еще проще с jQuery:

$('#id').trigger('event-type');

В вашем примере (http://getbootstrap.com/javascript/#tooltips) откройте консоль и введите, например:

$("button:contains('Tooltip on right')").mouseenter();

И подсказка появляется в DOM и может быть проверена/изменена вручную:

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

Как и в комментариях, если вы переместите указатель мыши на кадр страницы, вы можете инициировать другие события, такие как mouseout. Чтобы предотвратить это, вы можете нажать F8 (как в соответствующем ответе) или ввести debugger; (что эквивалентно script)