Как понять что меняет элемент сразу после загрузки страницы?

Question

[danforth]

Всем привет!
Есть элемент, который после загрузки через несколько миллисекунд меняет свой вид. Выглядит это вот так. Как отследить, что именно влияет так на данный элемент, без рысканья по коду в поисках селекторов? На гифке я просто нажимаю F5, после чего через какое-то время между элементами меню появляются borderы. Сайт для примера.

Comments

[Kovalsky]

Например, можно использовать mutationObserver

Answer 1

[DTX]

Установив Break on subtree modifications для html, всё-таки понял, из-за чего текст прыгает.


В общем, это происходит, когда вот сюда .menu_wrapper.clearfix добавляется класс .fluid.

supreme.js -> MenuInit()

menuWrapper = $('.h_menu2 .menu_wrapper');

			if (totalMenuWidth < menuWrapper.width()) {
				menuWrapper.addClass('fluid');
			} else {
				menuWrapper.removeClass('fluid');
			}

Comments

[pashted]

скорее всего, какая-то анонимная функция вызывает другую, которая лежит в библиотеке jquery. никак не найду , откуда вызывается)

[pashted]

я бы как раз стили и подправил бы, убрал бы оттуда fluid, тогда бордеры будут видны до применения этого класса

[danforth]

pashted: да, верно.. но прыгает все равно. Видимо там с шириной что-то, или marginы какие-то.

Answer 2

[RoverWhite]

В Google Chrome в Developer Tools в разделе Elements правой клавишей на искомый элемент и в открывшемся меню "Break on..." -> "Subtree modification"
Это в том случае если элемент меняется javasript'ом
После установки закладки перезагружаем страницу (F5) и должны остановиться как раз на том месте где
элемент меняется.

Comments

[danforth]

Пробовал, не срабатывает.

[RoverWhite]

danforth: Попробуйте еще добавить "Attributes modification"

[danforth]

RoverWhite: тоже пробовал.