Как найти JS скрипт, который добавляет атрибут HTML элементу

Когда работаешь с чужим кодом, который добавляет в HTML элементы какие-то атрибуты, которые ломает верстку, и это делает неизвестный js скрипт, найти ответственный участок кода иногда о-очень сложная задача. А порой такая задача может быть почти невыполнимой, без умения пользоваться дебагом.

В этой заметке разберем один из вариантов дебага в DevTools Google Chrome, который позволят найти скрипт (конкретый код), который изменяет атрибуты HTML элемента.

DevTool позволяет ставить DOM Breakpoints - брейкпоинты на элементы DOM девера. За более детальными примерами предлагаю сходить в эту статью: https://blog.bitsrc.io/using-dom-breakpoints-with-chrome-devtools-2f60e1fafcb2

Тут же, мы рассмотрим конкретный случай и его решение.

Проблема

На одном из сайтов, какой-то скрипт добавляет style="display: block" всем section элементам на странице. Такое поведение ломает верстку, потому что некоторые из этих элементов должны иметь свойство display: flex.

На сайте просто куча разных скриптов (интеграций), которые потенциально могут это делать. Логически догадаться, какой скрипт смотреть - невозможно.

Как найти скрипт и конкретно тот участок кода, который это делает?

Решение

В DevTool браузера Chrome можно устанавливать брейкпоинты на изменения ХТМЛ элементов, нас интересует "Модификация атрибута":

Right click on element > Break on > Attribute modifications

Сложноность тут заключается в том, что этот брейкпоинт работает только в рантайме, а у нас страница уже загрузилась и все скрипты отработали. Если тепрь поставить этот брейкпоинт и перезагрузить страницу, то ничего не произойдет.

Нам нужно где-то до модификации элемента остановить выполнение скриптов, затем включить брейкпоинт и только потом продолжить выполнение js сценария.

Сделать это можно по-разному, например так: устанавливаем брейкпоинт на любой скрипт, который выполняется до нужного нам события:

Ставим брейкпоинт для JS скрипта:

Перезагружаем страницу. Браузер останавливает js сценаций на месте нашего брейкпоинта.

Возвращаемся во вкладку Элементы и включаем DOM Breakpoint:

Запускаем остановленный сценарий дальше:

Теперь, следующей точкой остановки будет добавленный нами брейкпоинт ДОМ элемента:

Место кода, которе нас интересует найдено!