Как dev tools определить выполнение скрипта?

Question

[Vladimir L]

Как dev tools определить выполнение скрипта ? А именно как понять какой скрипт добавляет в тег span данные "I6, Diesel"?

Вроде ставлю break on на этот тег, но при перезагрузке у меня не происходит остановки, подскажите что не так делаю

Answer 1

[Антон Швец]

Самое простое - удалите/переименуйте тег и посмотрите где сломается.

Comments

[Vladimir L]

изменить тег я могу только в консоли, так как сайт не мой, при перезагрузки изменения слетят

[Антон Швец]

Vladimir Lobochkin, Поставьте break на родителя, на subtree modification.
Только боюсь у вас сайт созданный одним из js веб-фреймворков, и в этом случае весь DOM может создаваться динамически после загрузки. Вместе с данными.
А какую цель вы преследуюете?

[Vladimir L]

Антон, Я пытаюсь отпарсить сайт, часть данных уже есть в html документе, а часть потом загружаются через JS

[Vladimir L]

Антон, На родителя тоже пытался поставить

[SerzN1]

ссылку можно?

[SerzN1]

там есть слушатель "subtree modification" - стоит попробовать идти выше по дереву вплоть до документа пока не найдется что то меняющее дерево, если это реакт например - то не сработает поэтому лучше посмотреть какие именно запросы идут с сайта напряму и прошерстить их данные

[Vladimir L]

SerzN1, https://razmerkoles.ru/size/acura/cdx/2019/
Пробовал ставить на несколько родителей выше , но остановки скрипта не получил

[Антон Швец]

Vladimir Lobochkin, фреймворк строит почти все, кроме корневого дива какого-нибудь типа #app

Answer 2

[Vladimir T]

Попробуйте следующие:
В dev tool на вкладке Elements выбирите нужный div / span и щелкните по нему правой кнопкой мыши. В выповшем меню выбирите Break on -> и какой то modifications.

PS https://umaar.com/dev-tips/28-dom-breakpoint-pane/

Comments

[Vladimir L]

я же так и сделал, это видно на фото которое я приложил

Answer 3

[SerzN1]

все намного проще - это целый кусок HTML приходит в запросе на конкретную модель
`https://razmerkoles.ru/finder/search/by_model/?mak... .
можно открыть вкладку network в dev tools и убедиться в этом

Comments

[Vladimir L]

Вы про этот кусок кода

[SerzN1]

скорее да , проверял выбрать конкретную модель . очистите панель от всего и поменяйте модель машины -> придет запрос с данными на конкретную модель

поведение сайта описывается pjax - это отвратительная фигня из прошлого, но возможно вам она будет более полезна в данном случае

[Vladimir L]

Этот html код приходит с некоторыми пыстыми тегами, которые потом заполняются js скриптом, я и пытаюсь понять как вычислить какой скрипт отвечает за конкретное наполнение

[SerzN1]

тут все хитрее, до этого я смотрел на другой странице со списком.
на той странице, что у вас скрипт примерно такой,

<script>(function(){sRwd='/data/js/wZyYmtu4xq--/';!f...

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

И да там в этой же строке стоит проверка для таких как вы на headless chrome и Phantom...
Поэтому скопируйте все заголовки из нормального браузера, как советуют, соблюдая порядок и замените у себя, чтобы быть похожим на настоящим chrome

[Vladimir L]

SerzN1, А как у вас получилось определить что именно этот скрипт

<script>(function(){sRwd='/data/js/wZyYmtu4xq--/';!f...

Вы ставили breakpoint ? Или вручную просматривали каждый скрипт ?