Как отладить проблемы с наведением курсора CSS / Javascript

Question

Я часто ловлю себя на том, что хочу отладить проблемы с версткой CSS, которые связаны с изменениями DOM, вызванными Javascript в ответ на событие наведения курсора или другие правила CSS, применяемые из-за селектора :hover .

Обычно я бы использовал Firebug для проверки элемента, который доставляет мне проблемы, и выяснил, каковы были его CSS-свойства и откуда взялись эти свойства.Однако, когда задействовано наведение курсора мыши, это становится невозможным, потому что, как только вы перемещаете курсор мыши вниз к панели Firebug, интересующие вас элементы больше не наведены, применяемые правила CSS отличаются, и (в случае наведения курсора JS) DOM изменяется.

Есть ли какой-либо способ, которым я могу "заморозить" состояние DOM и применение: hover, чтобы проверить DOM таким, каким он был во время событие наведения?

Конечно, любые другие идеи о том, как отладить такого рода проблемы, приветствуются.

Answer 1

Добавить onmouseover обработчик функции для элемента, который принимает :hover.Внутри этой функции вызовите console.info(element) о любом элементе, о котором вы хотели бы знать.

myHoverElement.onmouseover = function() {
    console.info(document.getElementById("someotherelementofinterest"));
};

Когда вы запустите это с активным firebug, элемент будет доступен для проверки в консоли firebug.

Answer 2

Вы можете сделать это в Firebug, но это немного "глючит".Если вы осмотрите элемент, а затем перейдете с вкладки html на вкладку DOM, например, когда вы вернетесь на вкладку html, на вкладке css "style" справа появится выпадающий переключатель со стрелкой, в котором вы можете выбрать состояние: hover этого элемента, чтобы он был активным.Отстойно переключать вкладки, чтобы заставить его отображаться, но у меня это работает.

Answer 3

При проверке ссылок Firebug показывает состояние CSS по умолчанию, т.е.стили, применяемые к ссылке:.По умолчанию стили :hover и :active не отображаются.К счастью, вы можете изменить состояние ссылки, нажав "Стиль" и выбрав соответствующую опцию:

Answer 4

В firebug, находясь в режиме HTML, перейдите на правую боковую панель и найдите вкладку "Стили".Щелкните стрелку вниз и выберите :hover.

Answer 5

В Firefox (версия 33.1.1):

• Проверить элемент (Q)
• В представлении DOM щелкните правой кнопкой мыши элемент
• выберите :наведение курсора , :активный или : фокус в нижней части контекстного меню

Answer 6

Некоторые наборы инструментов JavaScript, такие как Dojo, используют CSS-классы, такие как dijitButtonHover для стилизации, а не :hover .

Таким образом, вкладка стиля: трюк с наведением курсора не работает.

Вместо этого вы можете щелкнуть правой кнопкой мыши узел (кто меняет классы CSS) на вкладке HTML и "Прервать изменение атрибута".

Answer 7

В Chrome (версия 35):

• Проверить элемент
• В окне просмотра элементов щелкните правой кнопкой мыши на элементе .
• Выберите "Принудительное состояние элемента" -> :активный, : наведение, :фокус, : посещенный

Answer 8

для решения проблем с css я нахожу плагин для веб-разработчика бесценным:

http://chrispederick.com/work/web-developer/

загрузите его, после чего в вашем распоряжении будет 2 возможных инструмента.

1. унаследованный css из файлов на любом наведенном элементе, используйте shift-ctrl-y

2. вычисленный css (включая любой встроенный стиль = applied, которого нет в файле .css - или с помощью метода .css из jquery и т.д.) - нажмите shift-ctrl-f

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

конечно, у него есть и другие замечательные применения, такие как превосходная отладка форм, включая редактирование скрытых полей и файлов cookie (которые можно использовать для тестирования на проникновение).

Answer 9

Вы также можете просмотреть этот элемент, затем на вкладке "Стиль" должна появиться маленькая стрелка выпадающего списка.В нем будет что-то вроде "Показать пользовательский агент", "Развернуть сокращенные свойства", затем под этим должно быть еще 2 (я предполагаю, что вы проверяете что-то, имеющее состояние наведения) :active и :hover выберите :hover и ты должен быть золотым.

Answer 10

У меня была такая же проблема, и я обнаружил, что, хотя я не мог проверять объекты наведения курсора в Firefox с помощью Firebug, веб-инспектор Safari замораживал текущее состояние и разрешал проверку.Чтобы активировать веб-инспектор Safari, просто введите следующую строку в терминал и перезапустите Safari:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Активируйте наведенный элемент в браузере, затем щелкните правой кнопкой мыши и выберите "Проверить элемент".Страница зависнет в своем текущем состоянии, что позволит вам просматривать мимолетные объекты сколько душе угодно.

Answer 11

В firebug нет идеального решения (наведение курсора мыши-эффект симуляции).

Однако есть несколько способов изменить состояние наведения в firebug:

1. Добавить :active государство, наряду с вашим :hover

   a:hover, a:active { ... }

   Если вы наведете курсор мыши на свой элемент, потянете его вниз и отпустите, он останется активным.

2. Поверните :hover состояние в .hover класс

   Вы можете отредактировать правило CSS, нажав на исходный файл (на вкладке Стиль Firebug).

   Затем, конечно, вы бы добавили (и удалили) .hover класс из вашей стихии.

Answer 12

Я часто создаю какой-нибудь альтернативный CSS или Javascript, чтобы "заморозить" мое зависшее событие;доведите его до совершенства с помощью Firebug и верните мое наведение на место.

Answer 13

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

Answer 14

Я знаю, что этот пост немного устарел, но для тех, кто найдет это в Google, я создал кроссбраузерный инструмент, который позволяет визуализировать ваш HTML / CSS макет простым движением мыши.Вы можете легко просматривать элементы в состоянии наведения курсора мыши.

Визуализатор HTML-полей - GitHub

Answer 15

В более новых версиях Firefox (по крайней мере, v57 и выше) пользовательский интерфейс инспектора немного отличается от того, когда были опубликованы другие ответы.Чтобы включить и заморозить :active/:hover/:focus состояние элемента, проверьте его (щелкните правой кнопкой мыши -> Проверить элемент) и в инспекторе щелкните по:

Результат:

Источник (изображения лицензированы в соответствии с CC-BY-SA версии 5, авторами Mozilla)