Как использовать chrome Web inspector для просмотра кода наведения

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

6 ответов


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

посмотреть правила :hover на панели стили нажмите маленькую кнопку пунктирного поля в правом верхнем углу.

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

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


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


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

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


В Firefox:

enter image description here

в firebug:

enter image description here

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


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


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

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