Как отладить CSS / Javascript при наведении

Question

Как отладить CSS / Javascript при наведении

73

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

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

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

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

Jason Creighton 03 июль 2009, в 23:29

Источник

4

Страшный момент, когда вы перемещаете курсор к тексту в firebug, но он исчезает.
Fahad Uddin 28 дек. 2012, в 21:42
1

Перейдите на вкладку источников -> Наведите на что-нибудь -> Нажмите F8 - он «заморозит» ваш экран, чтобы вы могли видеть, что все происходило в DOM, когда вы зависли
Abhinav Singi 15 сен. 2015, в 08:34

Теги:

javascript

html

css

hover

firebug

14 ответов

46

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

Neum 21 апр. 2010, в 20:01

8

Отличный совет! Тем не менее, это не глючит (по крайней мере, не в последней версии Firebug). Стрелка раскрывающегося списка на вкладке «стиль» CSS всегда есть. Просто выберите состояние: hover, и все готово.
Cory House 18 авг. 2010, в 03:00
7

проблема в том, что иногда эти стили не в CSS, они динамически применяются с помощью JavaScript
Kidburla 16 окт. 2011, в 18:58
3

это, к сожалению, не работает с изменениями DOM JavaScript, вызванными эффектом наведения. Я знаю, что опоздал с этим на два года, но у меня точно такая же проблема. Например, я не могу проверить элемент, который существует только в состоянии наведения (создается при наведении мыши, уничтожается при отпускании мыши).
ProblemsOfSumit 14 март 2013, в 09:49

Показать ещё 1 комментарий

29

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

Subodh Ghulaxe 13 дек. 2012, в 08:00

1

Я нашел эквивалентную функцию в Chrome, и я никогда не знал об этой функции раньше. Серьезно, это как сногсшибательное и революционное для меня.
kand 16 авг. 2013, в 14:43
1

Thnx работает для меня. Одна картинка стоит тысячи слов!
malisokan 05 дек. 2013, в 12:06
2

Обратите внимание, что у Firefox теперь есть новый значок, который вы можете щелкнуть; три частично наложенных прямоугольника в правом верхнем углу окна стиля.
TylerH 23 нояб. 2015, в 22:35
0

Но это не решает вопрос об авторах, когда класс добавляется Javascript. Как только вы удаляетесь, класс удаляется, и этот класс при наведении мышки - это то, что вам нужно проверять, а не псевдоэлемент. Тем не менее, очень полезные знания :)
Eoin 26 янв. 2017, в 14:16

Показать ещё 2 комментария

19

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

kelly johnson 15 нояб. 2011, в 16:53

5

В Firefox (v33.1.1):

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

Maximilian Köhler 01 дек. 2014, в 03:14

3

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

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

xonya 16 июль 2014, в 09:05

3

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

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

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

Arlo 30 май 2013, в 21:30

2

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

ramoneguru 14 окт. 2010, в 01:39

0

Ух ты, я золотой блестел во всем! :-)
Marcel 10 дек. 2012, в 20:31

2

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

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

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

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

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

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

Dimitar Christoff 03 июль 2009, в 22:50

1

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

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

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

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

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

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

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

Spencer 03 июнь 2010, в 05:27

1

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

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

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

Michael Sibley 23 фев. 2010, в 10:17

0

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

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

Gabriel McAdams 24 окт. 2016, в 06:38

0

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

user1703862 27 сен. 2012, в 16:19

0

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

Ecropolis 21 янв. 2011, в 22:56

Ещё вопросы

Страшный момент, когда вы перемещаете курсор к тексту в firebug, но он исчезает.
Перейдите на вкладку источников -> Наведите на что-нибудь -> Нажмите F8 - он «заморозит» ваш экран, чтобы вы могли видеть, что все происходило в DOM, когда вы зависли
Отличный совет! Тем не менее, это не глючит (по крайней мере, не в последней версии Firebug). Стрелка раскрывающегося списка на вкладке «стиль» CSS всегда есть. Просто выберите состояние: hover, и все готово.
проблема в том, что иногда эти стили не в CSS, они динамически применяются с помощью JavaScript
это, к сожалению, не работает с изменениями DOM JavaScript, вызванными эффектом наведения. Я знаю, что опоздал с этим на два года, но у меня точно такая же проблема. Например, я не могу проверить элемент, который существует только в состоянии наведения (создается при наведении мыши, уничтожается при отпускании мыши).
Я нашел эквивалентную функцию в Chrome, и я никогда не знал об этой функции раньше. Серьезно, это как сногсшибательное и революционное для меня.
Thnx работает для меня. Одна картинка стоит тысячи слов!
Обратите внимание, что у Firefox теперь есть новый значок, который вы можете щелкнуть; три частично наложенных прямоугольника в правом верхнем углу окна стиля.
Но это не решает вопрос об авторах, когда класс добавляется Javascript. Как только вы удаляетесь, класс удаляется, и этот класс при наведении мышки - это то, что вам нужно проверять, а не псевдоэлемент. Тем не менее, очень полезные знания :)
Ух ты, я золотой блестел во всем! :-)

Matt Bridges · Accepted Answer · 2009-07-03T22-31-00.000Z

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

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

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

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