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

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

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

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

Спасибо.

Ответ 1

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

Выберите режим проверки Firebugs
Наведите указатель мыши на элемент, который вы хотите проверить, а затем несколько раз используйте клавишу Tab, чтобы активировать Firebug (мне было сложно увидеть, когда Firebug был активным компонентом, но ничего подобного пробной и ошибка - когда я увидел, что панель поиска Firefoxes активна, я бы затем Shift + Tab назад дважды, чтобы попасть в Firebug.
Затем я использовал клавиши со стрелками L/R для соединения/расширения элементов и клавиш со стрелками U/D для навигации по консоли Firebugs.

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

Ответ 2

HTML-подсказка (Firebug)

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

HTML Tooltip (инструменты разработчика Firefox)

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

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

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

JQuery Tooltip

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

Regular Javascript Tooltip

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

Ответ 3

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

Ответ 4

Для подсказки JQuery UI я наконец установил длинную задержку для скрытия элемента, поэтому у меня есть время проверить его до его удаления. Например, я использовал это для проверки всплывающей подсказки:

    $( document ).tooltip({ hide: {duration: 100000 } });

вместо:

    $( document ).tooltip();

Ответ 5

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

Ответ 6

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

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

Ответ 7

Вы также можете запустить отладчик по таймеру. Введите эту команду в консоль:

setTimeout(function(){ debugger; }, 10000);

Это даст вам 10 секунд, чтобы использовать мышь и сделать страницу выглядеть так, как вы хотите, чтобы ее проверить. Когда отладчик начнет работу, страница замерзнет, и вы сможете исследовать элементы на вкладке инструмента разработчика, без изменения DOM или ответа на любые дополнительные события мыши.

Ответ 8

Для всплывающей подсказки bootstrap:

$(document ).tooltip({delay: { show: 0, hide: 100000 }});

Ответ 9

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

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

Ответ 10

Для событий Javascript, таких как Мышь над.

Открыть Firebug/Осмотреть элемент.
Нажмите элемент перед событием мыши, например. нажмите на div. Он станет синим, чтобы показать, что он выбран.
Поместите вашу мышь над элементом и не перемещайте с этой точки вперед.
Используйте клавиши со стрелками ↑/↓ для маневра в Firebug.
Используйте клавиши со стрелками ←/→, чтобы развернуть/сменить код с помощью + или -.
Дважды нажмите Tab, чтобы перейти на панель CSS.
Используйте клавиши со стрелками для навигации. Используйте shift и клавиши со стрелками для выбора текста. Ctrl и C для копирования.
Удерживайте shift и дважды коснитесь Tab, чтобы вернуться в область HTML.

Ответ 11

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

Ответ 12

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

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

$('your selector')

Напишите выше javascript и нажмите enter. у вас будет список элементов.

Теперь, например, Если добавленное библиотекой событие в mouseenter введите script:

$('your selector').mouseenter()

Нажмите enter.

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

Ответ 13

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

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