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

Я хочу увидеть :hover стиль для якоря, на котором я зависаю в Chrome. В Firebug есть раскрывающийся список стилей, который позволяет мне выбирать разные состояния для элемента. Я не могу найти ничего подобного в Chrome. Я что-то упускаю?

12 ответов


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

посмотреть правила :hover в области стили щелкните маленький :hov текст в верхнем правом углу.

Toggle element state

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

Force element state

Дополнительные советы о панель элементов на Ярлыки Инструментов Разработчика Chrome.


EDIT: этот ответ был до исправления ошибки, см. ответ tnothcutt.

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

PS: Я пробовал это на одном из ваших вопросительных тегов.


Я хотел увидеть состояние наведения в подсказках Bootstrap. Принудительное состояние: hover в инструментах Chrome dev не создало требуемого вывода, но запуск события mouseenter через консоль сделал трюк в Chrome. Если jQuery существует на странице, вы можете запустить:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Forcing hover or mouseenter for Bootstrap Tooltips


есть несколько способов, чтобы увидеть СОСТОЯНИЕ НАВЕДЕНИЯ стили в инструментах разработчика Chrome.

способ 01

enter image description here

способ 02

enter image description here

С Firefox По Умолчанию Разработчик Toll

enter image description here

С Firebug

enter image description here


в случае, если это помогает, это кажется проще в последнем Chrome (47.0.2526.106):

Проверьте элемент, а затем нажмите на три белые точки в левом желобе:
click on the three white dots

затем выберите желаемое состояние элемента из этого раскрывающегося списка:
this dropdown


Я не думаю, что есть способ сделать это. Я подал запрос функции. Если есть способ, разработчики в Google будут угрюмо указывать на это, и я отредактирую свой ответ. Если нет, нам придется ждать и наблюдать. (вы можете начать вопрос, чтобы проголосовать за него)


комментарий 1 участником проекта Chrome: в 10.0.620.0 на панели "стили" отображаются стили :hover для выбранного элемента, но не :деятельный.


(по состоянию на этот пост) Current стабильный канал версия 8.0.552.224.

вы можете заменить стабильный канал установка Google Chrome с бета-канал или Dev channel (см. Каналы Раннего Доступа).

вы также можете установить вторичная установка chrome, которая еще более актуальна, чем Dev канал.

... Сборка Canary обновляется даже чаще, чем канал Dev, и не тестируется перед выпуском. Поскольку Canary build иногда может быть непригодным для использования, он не может быть установлен в качестве браузера по умолчанию и может быть установлен в дополнение к любому из вышеуказанных каналов Google Chrome. ...


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

Undock Chrome Developer Tools

тогда действуйте так:

  • сначала убедитесь, что Chrome Developer Tools разблокирован.
  • затем просто переместите любую сторону окна инструментов Dev в середину элемента, который вы хотите проверить во время зависания.

Hover on element

  • наконец, наведите элемент, щелкните правой кнопкой мыши и проверьте элемент, переместите мышь в окно инструментов разработчика, и вы сможете играть с вашим элементом:наведите css.

Ура!


Я отлаживал меню hover состояние с Chrome и сделал это, чтобы увидеть код состояния наведения:

на Elements панель нажмите кнопку и выберите :hover.

на Scripts панель пойти, чтобы Event Listeners Breakpoints в правом нижнем разделе и выберите Mouse -> mouseup.

теперь проверьте меню и выберите нужное поле. Когда вы отпустите кнопку мыши, она должна остановиться и показать вам выбранное состояние наведения элемента в Elements панель (смотрим на the ).


Я мог видеть стиль, следуя ниже шаги, предложенные Babiker - "Щелкните правой кнопкой мыши элемент, но не перемещайте указатель мыши от элемента, держите его в состоянии наведения. Выберите проверить элемент с помощью клавиатуры, как в хит стрелка вверх,а затем введите клавишу."

для изменения стиля выполните вышеуказанные шаги и тогда - Измените вкладку браузера, нажав ctrl + TAB на клавиатуре. Затем нажмите кнопку назад на вкладке, которую требуется отладить. Ваш экран наведения все еще будет там. Теперь внимательно ваша мышь в область инструментов разработчика.


изменение наведите статус в Chrome довольно легко, просто выполните следующие действия:

1) щелкните правой кнопкой мыши на странице и выберите проверить

enter image description here

2) выберите элемент, который вы хотите проверить в DOM

enter image description here

3) выберите значок pin enter image description here (Переключить Состояние Элемента)

4) затем отметьте наведите

теперь вы можете увидеть состояние наведения выбранного DOM в браузере!


в моем случае я хочу dubug bootstrap tooltip. Но вышеприведенные методы для меня не работают. Я думаю, bootstrap реализовал это чем-то вроде события ввода/вывода мыши.

в любом случае, когда я наведу курсор на кнопку, он будет генерировать элемент brother html ниже кнопки, поэтому я выбираю родительский элемент кнопки на вкладке "элементы" окна "инструменты разработчика", наведите курсор на кнопку и "Ctrl + C", затем я могу вставить исходный код, содержащий сгенерированный код. Последний поиск сгенерированного кода, и добавьте его в исходный код с помощью "редактировать как HTML" на вкладке "элементы".

надеюсь, что это может помочь кому-то.


Я думаю, что это больше не проблема в Chrome, но на всякий случай. Я написал этот jQuery скрипт чтобы проверить DOM, когда я перемещаюсь с помощью клавиши TAB.

если изменить на использование "mouseover", будет выглядеть так:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

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