Проверка динамической веб-страницы с помощью Firebug или Chrome Dev Tools, когда содержимое постоянно меняется
Если я хочу DOM, проверьте какое-то веб-приложение, которое слишком часто меняет свою структуру DOM. Инспектор Firebug и Chrome отражает эти изменения, не позволяя мне на самом деле их проверять.
Если я сосредотачиваюсь на одном элементе и хочу посмотреть на него лучше, и этот элемент удален, я обычно не могу проверить этот элемент.
Есть ли способ "заморозить" веб-страницу в определенной точке или просто заморозить изменения DOM в инспекторе только для этих инструментов?
1 ответ
В Chrome и Chromium вы можете щелкнуть правой кнопкой мыши узел на вкладке Элементы / Инспектор инструментов разработчика и выбрать разбиение на изменение поддерева, изменение атрибута и удаление узла. Хотя вы не можете добавлять условия к этим точкам останова, например, только к разрыву, когда определенная переменная содержит указанное значение, это лучшие варианты, которые я нашел.
В Firefox события, которые вы можете прервать, можно найти, нажав кнопку "Развернуть панели" в правой части вкладки "Отладчик".
Разрушение модификации поддерева очень полезно, если вы не знаете, где будет изменен DOM. Просто установите это условие для узла тела (или выше), и он немедленно остановит любой скрипт, модифицирующий DOM под узлом тела. Это также очень полезно, когда узел, который вы хотите проверить, еще не существует, но вы знаете, где он будет вставлен, чтобы вы могли сломать изменяемый родительский узел.
DOM, по сути, будет заморожен в том состоянии, в котором он находится, непосредственно перед тем, как происходит реальное изменение (например, когда вставляется узел), когда отладчик скрипта находится на линии, которая вызвала модификацию.
Одна проблема заключается в том, что окно браузера получает наложение, которое предотвращает любое взаимодействие с ним, даже щелчок правой кнопкой мыши и выбор других элементов для проверки. Все еще можно проверить другие узлы, выбрав их на вкладке Элементы или сначала щелкнув значок "Выбрать элемент на странице для его проверки" в левой верхней части окна инструмента.
Если вы хотите проверить, как выглядит DOM, когда определенные элементы имеют :focused, :hover, :active, или же :visitedВы также можете принудительно вызвать эти состояния через контекстное меню на вкладке Элементы.