Как отлаживать и проверять вещи, которые меняются в ответ на щелчки мыши или изменения фокуса?

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

Есть ли способ работать с отладчиком, чтобы щелчки мыши и другие команды, которые я ему даю, не перехватывались сценарием, который я пытаюсь отлаживать?

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


javascript google-chrome-devtools firebug
person hugomg    schedule 08.11.2012    source источник
comment
У меня та же проблема, поэтому я создал crbug.com/160510.   -  person NVI    schedule 12.11.2012

Ответы (6)


arrow_upward
5
arrow_downward

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

person Asad Saeeduddin    schedule 08.11.2012
comment
Как упоминалось в вопросе, установка точек останова раздражает, если мне приходится делать это несколько раз или если я не знаю структуру отлаживаемого кода. Есть ли более прямой способ заморозить DOM? - person hugomg; 09.11.2012
comment
@missingno вы можете, например, прикрепить фиктивный обработчик событий ко всем элементам при наведении, а затем установить внутри него точку останова. Было бы раздражающе продолжать выполнение каждый раз, но точки останова могут быть условными. - person Asad Saeeduddin; 09.11.2012
comment
Он замораживает DOM, но также отключает щелчок правой кнопкой мыши, поэтому вы не можете использовать Inspect Element. Однако вы все равно можете исследовать в представлении Elements, если знаете, что ищете. По крайней мере, таким образом вы можете увидеть его выделенным при наведении на него курсора в Elements, чего вы не можете сделать вживую для вещей, которые исчезают, когда вы отводите от них мышь. - person Mu Mind; 01.02.2014

arrow_upward
2
arrow_downward

Вам нужно использовать точки останова. Что касается отслеживания того, что и где происходит, окно Chrome «Call Stack» может быть очень полезным.

Ваше здоровье

person Madbreaks    schedule 08.11.2012
comment
Однако установить точки останова сложно, если я не писал сценарий и не знаю, где их разместить. Есть ли способ просто приостановить выполнение сценария в целом без точек останова? - person hugomg; 09.11.2012
comment
Если вы их не использовали, прочитайте XHR Breakpoints и Event Listener Breakpoints в Chrome, возможно, вы сможете использовать любой из них... это зависит от ситуации. - person Madbreaks; 09.11.2012

arrow_upward
2
arrow_downward

В Firebug у вас есть Break on next элемент на Script панели. Начиная с Firebug 1.10, для этого существует сочетание клавиш: Ctrl+Alt+B в Windows (работает, даже если фокус находится на странице, а не в Firebug).

Вам, вероятно, потребуется сфокусировать панель Script в Firebug, так как это общий ярлык для Break on..., который отличается в каждой панели.

Обычно он замораживает DOM, хотя он не надежен на 100%.

Это также не идеально, потому что он остановится при любом выполнении JavaScript и не будет полезен, если в фоновом режиме есть какой-то агрессивный опрос или глобальный захват событий клавиатуры. В любом случае, это все же лучше, чем ничего.

person jakub.g    schedule 15.11.2012

arrow_upward
2
arrow_downward

Chrome приостанавливает выполнение Javascript F8; потребовалось немного повторения, но нажатие F8 в нужное время предотвратило расфокусировку элемента JS.

person Chris    schedule 08.03.2018
comment
Это сработало на удивление хорошо при работе со списком результатов, который исчезает из DOM, и у вас нет контроля над 1. поиском скомпилированного JS и 2. добавлением дополнительных встроенных JS. - person Ben Sewards; 20.11.2018

arrow_upward
0
arrow_downward

Если у вас возникли проблемы с выбором элемента, вы можете попробовать cmd + shift + c на Mac, чтобы выбрать элемент, не щелкая его правой кнопкой мыши.

Если это проблема с манипулированием DOM, вы можете попытаться принудительно установить состояние элемента ввода, щелкнув правой кнопкой мыши элемент на панели «Элементы» и установив принудительное состояние в фокус.

person resting    schedule 09.11.2012

arrow_upward
0
arrow_downward

  1. Сначала откройте прикрепленный DevTools (подход без пристыковки не будет работать из-за ограничений ОС).
  2. Когда появится окно автозаполнения, щелкните его правой кнопкой мыши и выберите «Проверить элемент» в контекстном меню. Фокус переместится на DevTools, но окно автозаполнения по-прежнему будет отображаться (это сработало для меня в Linux, Chromium на вершине дерева, M25. Ваш пробег может отличаться).
person Alexander Pavlov    schedule 16.11.2012