Firebug: Как проверить элементы, изменяющиеся с помощью движений мыши?

Question

Firebug: Как проверить элементы, изменяющиеся с помощью движений мыши?

иногда мне нужно проверить элементы, которые отображаются только на странице, если вы наведете курсор мыши на некоторую область. Проблема в том, что если вы начинаете перемещать мышь к консоли firebug, чтобы увидеть изменения, событие mouse-out запускается, и все изменения, которые я пытаюсь проверить, исчезают. Как бороться с такими случаями?

в основном я ищу что-то, что либо:

переключитесь на консоль firebug без перемещения мыши (с помощью сочетаний клавиш может быть? Но я не могу понять, как использовать firebug только с клавиатурой)

есть возможность "заморозить" страницу, так что ваши движения мыши не вызовет каких-либо событий.

спасибо.

586 13

debugging firebug

13 ответов:

Comments

Ничего не найдено.

Meerkatlookout · Accepted Answer · 2013-10-30 14:25:26

Я думаю, что вы также можете сделать это :

выберите Firebugs Inspect mode

наведите курсор на элемент, который появляется элемент, который вы хотите проверить, а затем использовать Tab ключ несколько раз, чтобы сделать Firebug активным (мне было сложно увидеть, когда Firebug был активным компонентом, но ничего похожего на проб и ошибок - когда я увидел, что Firefoxes Find Toolbar был активен, я бы тогда Shift + Tab назад дважды, чтобы попасть в Firebug.

затем я бы использовал клавиши со стрелками L/R для сжатия/расширения элементов и клавиши со стрелками U/D для навигации по консоли Firebugs

работал на меня в любом случае!

Stefan · Accepted Answer · 2017-08-11 14:19:17

HTML Tooltip (Firebug)

выберите элемент с инспектором или в DOM. Перейдите на вкладку " стили "в firebug и нажмите на маленькую стрелку на вкладке и выберите": hover "(также доступно": active"). Состояние останется на "наведении", и вы можете выбрать другие элементы, чтобы сделать их наведение.

HTML Tooltip (Firefox developer tools)

Нажмите кнопку, чтобы увидеть три флажки, которые можно использовать для установки псевдоклассов: hover,: active и: focus для выбранного элемента

эта функция также может быть доступна из всплывающего меню в представлении HTML.

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

Подсказка JQuery

Откройте консоль и введите jQuery('.css-class').trigger('mouseover')

Обычная Подсказка Javascript

Откройте консоль и введите document.getElementById('yourId').dispatchEvent(new Event('mouseover'));

david.s · Accepted Answer · 2012-06-30 10:08:14

панель стиля в Firebug имеет выпадающее меню, где вы можете выбрать :active или :hover государство.

Ronen Festinger · Accepted Answer · 2013-06-10 13:57:31

для подсказки jQuery UI я, наконец, настроил длинную задержку для скрытия элемента, поэтому у меня есть время, чтобы проверить его, прежде чем он будет удален. Например, я использовал это для проверки всплывающей подсказки:
    $( document ).tooltip({ hide: {duration: 100000 } });
вместо:
    $( document ).tooltip();

NickFitz · Accepted Answer · 2009-11-04 19:33:54

вы можете вставить точку останова в начале обработчика событий mouseout. Его код не будет выполнен, пока вы не разрешите ему продолжить, и вы можете использовать инспектор DOM и так далее, пока выполнение остановлено.

Casey · Accepted Answer · 2016-06-20 22:36:55

вы также можете запустить отладчик по таймеру. Введите в консоль следующую команду:
setTimeout(function(){ debugger; }, 10000);
Это даст вам 10 секунд, чтобы использовать мышь и сделать страницу выглядеть так, как вы хотите, чтобы проверить его. При запуске отладчика страница замерзнет, и вы сможете изучить элементы на вкладке инструмент разработчика без изменения DOM или ответа на какие-либо дополнительные события мыши.

Dave M-engineer · Accepted Answer · 2013-10-30 14:27:10

горячая клавиша Firebug для проверки элементов Ctrl + Shift + C (Windows / Linux).

перейти сюда для списка всех Firebug сочетания клавиш.

jpprade · Accepted Answer · 2016-02-08 17:55:19

для всплывающей подсказки bootstrap:
$(document ).tooltip({delay: { show: 0, hide: 100000 }});

jpath · Accepted Answer · 2014-11-02 12:50:45

при выборе :hover в меню CSS может быть хорошо, если вы хотите проверить только какой-то код CSS, он не работает, если все, что вы хотите проверить, изменяется с помощью JavaScript.

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

Eoin · Accepted Answer · 2015-02-18 13:39:09

на Javascript событий, таких как наведите указатель мыши на.

Открыть Firebug/Проинспектировать элемент.

нажмите на элемент перед событием наведения курсора мыши, например, нажмите на div. Он станет синим, чтобы показать, что он выбран.

положить наведите указатель мыши на элемент и Не двигайся это с этого момента вперед.

использовать ↑/↓ клавиши со стрелками для маневра в Firebug.

использовать ←/→ клавиши со стрелками для расширения / код контракта с + или -.

двойное нажатиеTab чтобы добраться до панели CSS.

используйте клавиши со стрелками для перемещения. Используйте shift и клавиши со стрелками, чтобы выделить текст. Ctrl & C скопировать.

провестиShift и двойное нажатие Tab чтобы вернуться к панели HTML.

Amiramix · Accepted Answer · 2013-10-25 19:26:27

Я нашел это Chrome работает немного иначе, чем Firefox. В частности, меню, которые закрываются при щелчке мыши за пределами меню, остаются открытыми при проверке их в Chrome (и они закрываются при осмотре их с Firebug). Поэтому совет заключается в том, чтобы попытаться использовать другой инструмент разработки в другом браузере, чтобы увидеть, если это имеет значение.

yogs · Accepted Answer · 2015-02-19 13:02:47

открыть консоль:

Если у вас есть подсказка на основе javascript, найдите соответствующие элементы в консоли с соответствующим селектором. как и ниже, и подтвердите, что вы можете найти соответствующий элемент с помощью селекторов.
$('your selector') 
напишите выше javascript и нажмите enter. у вас будет список элементов.

теперь, например, если библиотека добавила событие на mouseenter введите следующий скрипт:
$('your selector').mouseenter() 
нажмите enter.

таким образом, вы можете имитация событий движения мыши без фактической мыши. и можете использовать указатель мыши, чтобы расследовать дело в отладчике.

David Gaskins · Accepted Answer · 2015-12-04 07:05:26

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

Control + Alt + B. Это "break on mutate". Это означает, что когда вы зависаете над элементом с включенным firebug (Control + Shift + C), когда атрибуты HTML изменятся, вместо этого они ударят по точке останова, что позволит вам легко перемещаться, чтобы исследовать пути и т. д.