Перевірте елемент, який з’являється лише тоді, коли інший елемент переоцінений / введений мишею

Часто я хочу перевірити елемент (наприклад, підказку), який з’являється лише тоді, коли інший елемент переоцінений / введений мишею. Елемент, що з'являється, стає видимим через подія мишіцентру jQuery.

Я не можу перевірити підказку, оскільки підказка зникає, коли моя миша залишає елемент, що містить.

Чи є спосіб призупинити події JS, щоб я міг навести курсор на елемент, а потім призупинити JS браузера та успішно перевірити його?

Наприклад, спробуйте ознайомитись із підказками завантажувального інструмента для завантаження Twitter: http://getbootstrap.com/javascript/#tooltips .

У Chrome 38.0.2094.0 це досить просто.

Ось як це буде виглядати:

Крок за кроком:

1. Відкрийте DevTools на панелі "Джерела"
2. Переконайтеся, що підказка з’являється, наведення курсор на кнопку
3. Натисніть F8, щоб заморозити сторінку
4. Перейдіть на панель «Елементи» та використовуйте піктограму лупи у верхньому лівому куті для вибору підказки

Якщо підказка з’являється через CSS, ось що ви можете зробити в цьому випадку:

Крок за кроком:

1. Відкрийте DevTools
2. Виберіть запускаючий елемент у інструментах розробки (посилання)
3. Клацніть правою кнопкою миші та виберіть "стан елемента елемента" та виберіть ": навести курсор"
4. Перевірте підказку CSS

Обидва Сафарі і Web Inspector пропозиції прапорців Chrome, де ви можете перемикати :active, :focus, :hoverі :visitedстан елемента. Використовувати їх може бути ще простіше.

Сафарі:

Chrome:

Існує ще один складний спосіб зробити це:

1. Перейдіть елемент, завдяки якому з’явиться підказка.
2. Клацніть правою кнопкою миші, щоб відкрити контекстне меню.
3. Перемістіть курсор миші до вікна інструменту розробки та клацніть лівою кнопкою миші будь-де на панелі інструментів програми.

Підказка залишиться видимою, ви зможете ознайомитись з нею на вкладці «Елемент».

Тестовано на Chrome. Схоже, це не працює на Firefox.

Хоча відповідь @ SomeGuy відмінна (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;(що є його еквівалентом сценарію)