it-swarm.com.ru

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

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

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

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

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

70
Jason Creighton

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

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

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

22
Matt Bridges

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

44
Neum

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

enter image description here

31
Subodh Ghulaxe

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

19
kelly johnson

В Firefox (v33.1.1):

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

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

  • Осмотреть элемент
  • Внутри средства просмотра элементов щелкните правой кнопкой мыши на элементе.
  • Выберите «Состояние элемента силы» ->: активный,: зависание,: фокус,: посещенный
3
xonya

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

Так что вкладка Стиль: трюк при наведении курсора не работает.

Вместо этого, вы можете щелкнуть правой кнопкой мыши по узлу (чьи CSS-классы меняются) на вкладке HTML и «Сломать при изменении атрибута»

3
Arlo

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

2
ramoneguru

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

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

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

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

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

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

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

2
Dimitar Christoff

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

defaults write com.Apple.Safari WebKitDeveloperExtras -bool true

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

1
Michael Sibley

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

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

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

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

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

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

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

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

1
Spencer

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

HTML Box Visualizer - GitHub

0
Gabriel McAdams

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

 enter image description here

Результат:

 enter image description here

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

0
balu

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

0
Ecropolis

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

0
user1703862