Я пытаюсь отладить событие JavaScript onFocus, прикрепленное к кучке текстовых полей на странице. Ошибка возникает при выборе текстового поля, а затем перехода к следующему текстовому полю. Я пытаюсь отладить это, поставив точку останова в событии onFocus с помощью Chrome Dev Tools. Проблема, с которой я сталкиваюсь, заключается в том, что когда я выбираю текстовое поле и точка прерывания поймана, Chrome Dev Tools перехватывает фокус и не возвращает его, поэтому я не могу перейти к следующему текстовому полю. У кого-нибудь есть идея для работы? Думаю, я могу прибегнуть к предупреждающим заявлениям, чтобы распечатать всю необходимую информацию, не используя инструменты Chrome Dev...
Отладка события onFocus с помощью инструментов разработчика Chrome? Не удается вернуть фокус после точки останова
Ответ 1
Один из вариантов для отладки сложных случаев - установить интервал для опроса фокуса в консоли.
setInterval(function() {console.log($(':focus')); }, 1000);
Введите это в консоли (обновите его, чтобы включить любую информацию, которая вас интересует), нажмите enter, а затем сохраните консоль, где вы можете ее увидеть, пока вы делаете что-то в своем интерфейсе.
Ответ 2
Вы правы, Chrome DevTools получают фокус и не восстанавливают его при переключении на отладочную страницу. Не стесняйтесь сообщать об ошибке в http://new.crbug.com (убедитесь, что вы запустили сводку с помощью "DevTools:", чтобы ошибка могла быть назначена соответствующую команду как можно быстрее.)
На стороне примечание console.log() является немного лучшей альтернативой alert(), поскольку позволяет форматировать вывод.
Ответ 3
В Chrome Dev Tools есть кнопка воспроизведения/паузы как в инспекторе, так и в виде наложения на веб-страницу. Использование наложения предотвращает фокус с посадкой на Инспекторе.
Кроме того, я обнаружил, что следующее решение для ведения журналов легче отслеживать, чем метод интервалов (благодаря меньшему избыточности и способности подбирать изменения, которые происходят быстрее, чем интервал):
$('*').on('focus blur', function(event) {console.log(event.type + " to:"); console.log(document.activeElement);});