Как переключить фокус на вкладку «Инспектор» в веб-инструментах Firefox?

Question

Кнопка на веб-сайте запускает всплывающее меню при нажатии (только при нажатии, а не при зависании). Я хочу, чтобы иметь возможность проверить это всплывающее меню, но после того, как я нажму правой кнопкой мыши и выберите «Осмотреть элемент», он исчезает, поэтому я больше не могу его проверять.

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

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

Я думал, что это можно решить, переключив фокус на вкладку Inspector в веб-инструментах Firefox, не нажимая ничего.

Я попытался использовать различные сочетания клавиш, такие как Ctrl + Shift + C или Ctrl + Shift + I (открывает веб-инструмент), но я не смог переключить фокус на вкладку Inspector, чтобы перемещаться по HTML после использования этих ярлыков.

Я также пробовал использовать режим проверки (кнопка слева от вкладки «Инспектор»), которая позволяет мне проверять все, что я нажимаю. Проблема с этим методом заключается в том, что для перехода в меню мне нужно сначала щелкнуть по кнопке, а режим проверки - только проверить первое, что я нажимаю. Может быть, есть способ игнорировать первый клик в режиме проверки?

EDIT:
Нажатие клавиши TAB неоднократно, иногда фокусируется на вкладке Inspector. Иногда он просто просматривает элементы на веб-сайте и никогда не фокусируется на вкладке Inspector. Тем не менее, времена, когда я мог использовать TAB для фокусировки на вкладке Inspector, всплывающее меню исчезло после нажатия TAB примерно 20 раз, поэтому мне нужен другой метод, который не использует клавишу TAB.

Answer 1

У меня есть аккаунт deviantart, поэтому я смог воспроизвести описанную вами проблему.

Проблема заключается в том, что всплывающее окно, которое появляется при нажатии, скрывается, когда окно размыто или когда страница нажата. И поскольку фокусировка на инспекторе всегда приведет к размытию окна содержимого, вы не сможете переключиться на инспектор, сохранив всплывающее окно.

Итак, как отметил в своем комментарии @Callahad, единственным возможным вариантом здесь является использование точки останова, чтобы заставить javascript-код приостанавливаться в определенный момент времени, что позволяет вам проверять всплывающее окно, не закрывая его под вас ,

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

• Когда появляется всплывающее окно: это происходит при нажатии элемента кнопки редактирования. Если бы вы могли добавить точку останова к этой точной строке на панели отладчика, тогда вы сможете щелкнуть по кнопке редактирования и выполнить код до появления всплывающего окна, а затем снова переключиться на инспектор, чтобы проверить его , К сожалению, обработчик событий javascript для этого находится в атрибуте onclick на узле, и вы не можете установить там точку останова.
• Когда всплывающее окно будет скрыто. Это происходит при размывании окна.Чтобы установить точку останова, вы можете попытаться выполнить следующие действия:
  • найти HTML-элемент в инспекторе (это элемент, где событие, добавленный в окно показано),
  • нажмите на иконке [ой] следующим к нему,
  • найти «размытость» событие в списке, который появляется,
  • нажмите на значке отладчика рядом с ним, это приведет вас к отладчику в правой линии, надеюсь
  • могут быть довольно-напечатают код, если необходимо, с помощью кнопки {} в нижнем левом углу отладчика
  • добавьте точку останова в нужном месте в этом коде
  • , а затем просто нажмите, чтобы отобразить всплывающее окно, а затем щелкните за окном, это приостановит выполнение javascript, где вы добавили точку останова, которая перед загрузкой поэтому вы можете перейти к инспектору и проверить всплывающее окно перед его закрытием.
• Всплывающее окно также скрывается при нажатии на страницу, поэтому вы можете сделать то же самое, посмотрев на это событие.

Другой обоснованный подход может быть:

Override код, который скрывает всплывающие окна! Javascript динамичен, поэтому вы можете полностью превратить это в свою пользу. Найдите функцию в коде deviantart, которая скрывает всплывающее окно, и измените его. Быстро глядя на то, что было на объекте окна в веб-консоли, мне посчастливилось найти: Popup2.hideAll. Поэтому, если вы просто запустите это в веб-консоли: Popup2.hideAll = function(){}, а затем откройте всплывающее окно, оно останется там и никогда не спрячется, пока вы не перезагрузите страницу. Это дает вам хороший способ проверить это.

Последнее, очень хороший способ работать с изменениями DOM, как это было бы иметь функцию «break on DOM mutations» в devtools. Firebug имеет это, Chrome devtools тоже, к сожалению Firefox doesn't yet.

Идея этой функции проста в инспекторе: щелкните правой кнопкой мыши любой узел (в данном случае родительский элемент, в котором будет отображаться всплывающее окно в DOM), выберите «break on mutation», затем нажмите, чтобы открыть всплывающее окно. Когда всплывающее окно будет вставлено в DOM, devtools увидит это и автоматически остановит выполнение javascript.