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

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

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

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

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

70
css firebug hover html javascript

14 ответов

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

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

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

22

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

44

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

enter image description here

31

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

19

в Firefox (v33.1.1):

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

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

таким образом, вкладка стиль: hover трюк не работает.

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

3

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

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

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

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

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

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

  2. вычисляемый css (включая любой встроенный стиль= применяется, который не находится в a .CSS-файл или через .метод css из jquery и т. д.) - нажмите сдвиг-сочетание клавиш Ctrl-Ф

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

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

2

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

2

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

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

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

1

в firebug нет идеального решения (эффект наведения мыши/наведения).

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

  1. добавить :active государство, вместе с :hover

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

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

  2. повернуть :hover государство в .hover класс

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

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

1

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

0

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

0

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

HTML Box визуализатор-GitHub

0