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

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

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

Можно ли каким-либо образом "заморозить" состояние DOM и приложение: hover, чтобы проверить DOM, как это было во время события зависания?

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

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

Ответ 5

В Firefox (v33.1.1):

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

Ответ 6

В некоторых инструментариях JavaScript, таких как Dojo, используйте классы CSS, такие как dijitButtonHover, в стиле, а не: hover.

Итак, вкладка Style: hover trick не работает.

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

Ответ 7

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

Осмотреть элемент
Внутри зрителя элементов щелкните правой кнопкой мыши элемент.
Выберите "Force element state" → : active,: hover,: focus,: visited

Ответ 8

для проблем css, я считаю, что плагин веб-разработчиков неоценим:

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

загрузите его, тогда у вас есть 2 возможных инструмента.

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

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

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

Ответ 9

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

Ответ 10

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

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

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

Ответ 11

В firebug нет идеального решения (эффект mouseover/hover-simulation).

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

Добавьте состояние :active вместе со своим :hover

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

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

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

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

Ответ 12

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

Ответ 13

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

Ответ 14

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

HTML-документ Visualizer - GitHub