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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

Ответ 3

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

В надежде, что они сделают это немного легче в будущих сборках.

Ответ 5

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