Как использовать веб-инспектор Chrome для просмотра кода наведения

Question

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

Answer 1

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

Чтобы увидеть правила типа :hover на панели стилей, нажмите маленькую пунктирную кнопку в правом верхнем углу.

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

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

Answer 2

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

Answer 3

В Chrome:

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

В Firefox:

в firebug:

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

Answer 4

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

Здесь мы надеемся, что они сделают это немного легче в будущих сборках.

Answer 5

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

Answer 6

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

См. Состояние при наведении в Chrome Developer Tools