Как отследить добавление элемента HTML? - PullRequest
Новая
       8

Как отследить добавление элемента HTML?

0 голосов
/ 22 мая 2019

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

Это просто <div style="height:120px;"></div> элемент в теле страницы, и он появляется динамически через некоторое время.

Вот почему я не могу просто установить точку останова на ней на вкладке elements с помощью Chrome Dev Tools.

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

Как определить, какой скрипт и какая его часть создает этот крошечный элемент DOM на странице, если он появляется через некоторое время, и я не могу установить для него точку останова раньше?

Ответы [ 3 ]

1 голос
/ 22 мая 2019

Используйте вкладку «Быстродействие» в Chrome и запустите короткую запись исполнения. Затем увеличьте масштаб и найдите точку изменения элемента DOM в водопаде. Нажмите на этот маркер в водопаде, и он скажет вам, какой метод был вызван в момент изменения элемента DOM. Вы должны быть в состоянии отследить его оттуда, выполнив поиск функции в ваших скриптах.

0 голосов
/ 25 мая 2019

Используйте модификацию поддерева DOM, измените точку останова .

Например, если ваша страница выглядит следующим образом: 

...
<body>
  <main>
    ...
    <div style="height:120px;"></div>
  </main>
</body>

Вы хотите установить поддеревоточка останова модификации на <main>.Всякий раз, когда дочерний узел <main> изменяется (например, добавляется ваш узел), DevTools делает паузу в строке JS, вызвавшей изменение.

0 голосов
/ 22 мая 2019

Если элемент изменяется со временем, он может иметь связанное событие - чтобы проверить это, вы можете открыть chrome «Инструменты разработчика» и нажать «Прослушиватели событий», а затем выберите элемент, чтобы увидеть, что с ним связано.Вы также можете нажать «Computed» и щелкнуть по различным элементам, чтобы увидеть, что изменило его.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...