Использование веб-инспектора хромов для просмотра кода очень полезно. Но как вы, например, просматриваете код наведения курсора для кнопки? Вам нужно будет навести указатель мыши на кнопку, и поэтому вы не сможете использовать ее (мышь) в инспекторе. Есть ли какие-либо ярлыки или другие способы сделать это в инспекторе?

Теперь вы можете видеть как правила стиля псевдокласса, так и применять их к элементам.

Чтобы увидеть правила, как :hoverна панели «Стили», нажмите кнопку в виде небольшого пунктирного прямоугольника в правом верхнем углу.

Чтобы перевести элемент в :hoverсостояние, щелкните его правой кнопкой мыши.

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

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

Это немного раздражает, но вам нужно щелкнуть элемент правой кнопкой мыши, а затем, удерживая указатель мыши на ссылке, с помощью клавиатуры выбрать ссылку «Проверить элемент» и нажать клавишу ввода. Это должно показать вам CSS псевдокласса при наведении курсора для выбранного элемента.

Мы надеемся, что в будущих сборках это будет немного проще.

В Chrome:

Вы также можете навести указатель мыши на элемент, а затем щелкнуть, CTRL+SHIFT+Cчтобы просмотреть этот элемент.

В Firefox:

в firebug:

источник: https://stackoverflow.com/a/11272205/2165415

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

Пожалуйста, посмотрите на ссылку ниже для ответа

Смотрите: состояние наведения в Инструментах разработчика Chrome