Використання веб-інспектора хромів для перегляду коду дуже корисно. Але як ви бачите, наприклад, код наведення для кнопки? Вам доведеться навести курсор миші на кнопку і, отже, не можна використовувати її (мишку) у інспектора. Чи є ярлики чи інші способи цього досягти у інспектора?

Тепер ви можете побачити обидва правила стилю псевдокласу та примусити їх до елементів.

Щоб побачити такі правила, як :hoverна панелі "Стилі", натисніть на невелику пунктирну кнопку вгорі праворуч.

Щоб примусити елемент до :hoverстану, клацніть його правою кнопкою миші.

Крім того, ви можете використовувати панель бічної панелі прослуховувача подій на панелі «Сценарії» та вибрати паузу в обробниках миші.

Крім того, ви можете використовувати панель бічної панелі прослуховувача подій на панелі «Сценарії» та вибрати паузу в обробниках миші.

Це трохи дратує, але вам потрібно клацнути правою кнопкою миші на елемент, а потім, утримуючи курсор миші на посилання, за допомогою клавіатури виберіть посилання "Перевірити елемент" і натисніть клавішу Enter. Це повинно показати вам css для клавіші наведення курсора для вибраного елемента.

Ось сподіваємось, що вони полегшать це в майбутньому.

У Chrome:

Ви також можете навести елемент миші на елемент, а потім натиснути, CTRL+SHIFT+Cщоб перевірити цей елемент.

У Firefox:

у firebug:

джерело: https://stackoverflow.com/a/11272205/2165415

Я не впевнений, що я правильно розумію ваше запитання, але якщо ви хочете побачити код обробника подій, ви можете просто ознайомитись з елементом і подивитися на панель бічних панелей слухачів подій панелі елементів. Інший спосіб - просто натиснути кнопку паузи на Панелі сценаріїв і просто навести елемент. Відладчик зупиниться на першій інструкції першого обробника подій.

Будь ласка, подивіться на посилання нижче для відповіді

Див .: стан наведення курсора в Інструменти для розробників Chrome