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