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

99

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

Бо.
источник
2
Разве это не дубликат этого? stackoverflow.com/questions/4515124/…
Mixologic

Ответы:

156

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

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

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

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

Трэвис Норткатт
источник
1
В Chrome 48 (и, возможно, ранее) этот пунктирный прямоугольник был заменен значком канцелярской кнопки с надписью «Переключить состояние элемента» при наведении на него курсора. Затем вы выбираете «наведение» из выпадающего списка.
sameers
15

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

Юрий Семихатский
источник
6

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

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

пурпурный
источник
Полезно знать, но да, очень неприятно, что мышь должна постоянно зависать над ссылкой ... даже когда вы копаетесь в окне проверки элемента, используя только клавиатуру. Какая досада!
Чад Шульц
Фактический весь процесс вынуждает элемент :hoverсостояния, ( as in the accepted answer), также осуществляется через щелчок правой кнопкой мыши по элементу,> Проверить и держать указатель там, а затем с помощью клавиш клавиатуры , чтобы проверить псевдокод .. Спасибо за эту рабочую альтернативу .... Так что не на самом деле неприятность !
:)
5

В Chrome:

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

В Firefox:

введите описание изображения здесь

в firebug:

введите описание изображения здесь

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

Т. Тодуа
источник
1

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

Loislo
источник
Не могли бы вы немного подробнее рассказать, как вы это делаете? Типичным случаем может быть кнопка, которая мне нравится, и я хочу увидеть, как эффект зависания достигается таким же простым способом, как и обычный осмотр.
Бо.
0

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

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

Сантош Халсе
источник
Ссылка может истечь, и ваш ответ станет бесполезным. Пожалуйста, укажите в своем ответе некоторую информацию, чтобы этого не произошло.
Божидар Станчев 03