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