html Как отследить изменения в DOM при каких то действиях на странице

Цель: понять какая именно html разметка добавляется на страницу при определенных действиях

Возможные варианты:

1. Отладка JS страницы

Отладка JS: Если за это отвечает JS то можно расставить точки останова, но это неудобно если код с которым вы работаете собран в продакшн режиме или если вам не знаком данный проект.

Т.е. это не всегда удобный вариант

2. Перехват событий на родительском элементе

Если вы отслеживаете какие-то быстрые изменения. которые, происходят при перемещении мыши - напр. что-то показывается при наведении но потом тут же исчезает, когда мыш покидает объект, то возможно стоит перехватить события, которые вы не хотите передвать элементу, чтобы он не скрыл то, что появляется при наведении.

В этом случае можно действовать примерно по такой схеме:

1. Сохраним родительский элемент (надежнее всего body) в глобальную переменную (в Chrome для этого в инспекторе жмем на тэг элемента правой кнопкой и выбирем пункт "Save to global variable")
2. В консоли браузера нашей переменной присвоится имя вроде temp1 и далее перехватим события, которые мы не хотим передавать изучаемому элементу, в моем случае это события связанные с "уходом" мыши с области элемента:
   

   temp1.addEventListener('mouseleave', e => e.stopPropagation(), {capture: true});
   temp1.addEventListener('mouseout', e => e.stopPropagation(), {capture: true});

   -- после этого можно произвести на странице действия, после которых вы ожидаете появления какой-то новой разметки, в нашем примере это наведение мыши на элемент