Вопрос по html, firebug, javascript, css, hover – Как отладить CSS / Javascript при наведении

70

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

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

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

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

Перейдите на вкладку источников - & gt; Наведите на что-нибудь - & gt; Нажмите F8 - он "замерзнет" ваш экран, чтобы вы могли видеть, что все произошло в DOM, когда вы зависли Abhinav Singi
Страшный момент, когда вы перемещаете курсор к тексту в firebug, но он исчезает. Fahad Uddin

Ваш Ответ

15   ответов
31

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

enter image description here

Но это не решает вопрос об авторах, когда класс добавляется Javascript. Как только вы уйдете, класс будет удален, и вам нужно проверить этот класс при наведении, а не псевдоэлемент. Тем не менее, очень полезные знания :)
Обратите внимание, что у Firefox теперь есть новый значок, который вы можете щелкнуть; три частично наложенных прямоугольника в правом верхнем углу окна стиля.
Thnx работает для меня. Одна картинка стоит тысячи слов!
Я нашел эквивалентную функцию в Chrome, и я никогда не знал об этой функции раньше. Серьезно, это как сногсшибательное и революционное для меня.
0

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

44

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

Отличный совет! Однако он не содержит ошибок (по крайней мере, в последней версии Firebug). Стрелка раскрывающегося списка "Стиль" Вкладка CSS всегда есть. Просто выберите состояние: hover, и все готово.
проблема в том, что иногда эти стили не в CSS, они динамически применяются с помощью JavaScript
это, к сожалению, не работает с изменениями DOM JavaScript, вызванными эффектом наведения мыши. Я знаю, что опоздал с этим на два года, но у меня точно такая же проблема. Например, я не могу проверить элемент, который существует только в состоянии наведения (создан при наведении мыши, уничтожен при отпускании мыши).
19

в представлении HTML, посмотрите на правую панель и найдите & quot; Стили & quot; Вкладка. Нажмите стрелку вниз и выберите:hover.

22

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

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

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

Я считаю, что подход Neum проще и полезнее.
Это хорошо, и ваше упоминание о "информации" заставил меня взглянуть на API консоли Firebug в первый раз, и я нашел там также "console.dir" (Дамп свойств DOM) и & quot; console.dirxml & quot; (Дамп дерева исходного кода HTML.) К сожалению, он не решает проблему точного показа того, какие правила CSS применяются точно так же, как в режиме реального времени, но, возможно, я надеюсь на слишком многое. Jason Creighton
Да, я тоже - но на момент первоначального вопроса & amp; ответить на эту функцию не существует в firebug :)
Где это должно быть добавлено? В консоли где-нибудь?
1

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

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

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

2

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

Ух ты, я золотой блестел повсюду! :-)
2

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

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

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

  1. inherited css from files on any moused-over element, use shift-ctrl-y

  2. computed css (incuding any inline style= applied that is not in a .css file - or through a .css method from jquery etc) - press shift-ctrl-f

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

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

3

Inspect element Inside the elements viewer right click on the element . Select "Force element state" -> :active, :hover, :focus, :visited
0

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

enter image description here

Результат:

enter image description here

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

0

Проверить элемент & quot; при запуске состояния наведения. Это сработало для меня в Firebug и WebKit.

0

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

HTML Box Visualizer - GitHub

1

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

Тем не менее, есть несколько способов отредактировать ваше состояние наведения в firebug:

  1. Add an :active state, along with your :hover

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

    If you mouse down on your element, drag off and release, it remains active.

  2. Turn the :hover state into a .hover class

    You can edit the CSS rule by clicking on the source file (in Firebug's Style tab)

    Then of course, you'd add (and remove) the .hover class from your element.

3

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

Таким образом, вкладка «Стиль»: фокус при наведении курсора не работает.

Вместо этого вы можете щелкнуть правой кнопкой мыши по узлу (чьи CSS-классы изменились) на вкладке HTML и "Разбить при изменении атрибута" & quot;

5

Inspect element (Q) In the DOM view right click the element select :hover, :active or :focus at the bottom of the context menu

Похожие вопросы