Как заморозить в отладчике меняющийся DOM?
От: CaptainFlint Россия http://flint-inc.ru/
Дата: 24.06.24 14:44
Оценка:
Есть задача: написать себе юзезрстиль для изменения внешнего вида неких элементов сайта. Исходники сайта недоступны, доступа к серверу нет.
Проблема в том, что эти элементы, которые хочется поменять, являются динамическими. Они появляются на долю секунды, максимум секунду, и потом исчезают или заменяются другими элементами. Мне физически не хватает времени кликнуть в веб-отладчике кнопку селектора, потом на сам элемент и потом ещё увидеть в дереве, как этот элемент задаётся.

Существует ли какая-то возможность записывать изменения DOM и просматривать изменения, или, скажем, по нажатию какой-то волшебной кнопки замораживать состояние сайта (или отображающегося в веб-отладчике дерева этого сайта) на текущий момент? Я порылся в разных панелях, предоставляемых хромоотладчиком (браузер Vivaldi, если это существенно), но не смог найти ничего подходящего (возможно, не разобрался; я в этой области, в общем-то, нуб и многих фич отладчика не понимаю). Есть какой-то инструмент Changes, но он открывает пустую панель, которая так и остаётся пустой с надписью "No changes", чтобы ни происходило на сайте.
Почему же, ё-моё, ты нигде не пишешь «ё»?
Re: Как заморозить в отладчике меняющийся DOM?
От: rFLY  
Дата: 24.06.24 15:12
Оценка:
Здравствуйте, CaptainFlint, Вы писали:

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

Это что за элементы такие появляющиеся на долю секунды, для чего они?
Re: Как заморозить в отладчике меняющийся DOM?
От: m2user  
Дата: 24.06.24 15:38
Оценка:
CF>Проблема в том, что эти элементы, которые хочется поменять, являются динамическими. Они появляются на долю секунды, максимум секунду, и потом исчезают или заменяются другими элементами. Мне физически не хватает времени кликнуть в веб-отладчике кнопку селектора, потом на сам элемент и потом ещё увидеть в дереве, как этот элемент задаётся.

Вероятно следует поставить event listener breakpoint на DOM Mutation и включить Log там же.
(это на примере Mozilla Firefox). Встать на паузу и пройтись пошагово в отладчике тоже можно.
Re[2]: Как заморозить в отладчике меняющийся DOM?
От: CaptainFlint Россия http://flint-inc.ru/
Дата: 24.06.24 16:06
Оценка:
Здравствуйте, rFLY, Вы писали:

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

FLY>Это что за элементы такие появляющиеся на долю секунды, для чего они?

Разные ситуации. Например, на IMDB регулярно само вылогинивает, а потом начинает задалбывать всплывашкой "а не хотите ли обратно залогиниться?", которая выскакивает как раз поверх рейтинга, закрывая его собой.
Или на Discord'е когда всякие внутричатовые картинки-видео грузятся, на их месте первым делом отрисовывается какой-то ядерно-кислотный плейсхолдер, который потом заменяется на подгрузившуюся картинку; раздражает такая цветоввая гамма, хочу прибить плейсхолдер, чтобы вместо него был обычный белый или серый фон.
Почему же, ё-моё, ты нигде не пишешь «ё»?
Re[2]: Как заморозить в отладчике меняющийся DOM?
От: CaptainFlint Россия http://flint-inc.ru/
Дата: 24.06.24 16:24
Оценка:
Здравствуйте, m2user, Вы писали:

M>Вероятно следует поставить event listener breakpoint на DOM Mutation и включить Log там же.

M>(это на примере Mozilla Firefox). Встать на паузу и пройтись пошагово в отладчике тоже можно.

С Firefox пока не пробовал смотреть. Надо глянуть, может, там есть что-то более подходящее.

Конкретно mutation в моём случае не подходит, так как для этого этот listener уже должен существовать. (Хотя, может, в Firefox можно свои добавлять с нуля... Но даже если так, это, скорее всего, будет не то; см. дальше.) Я нашёл рядом другой инструмент: DOM Breakpoints, это уже гораздо ближе к тому, что надо, но всё-таки тоже не совсем то, поскольку в нём приходится продираться через громадное количество шагов интерактивной отладки скриптов. И к тому же возникло подозрение, что в моём конкретном случае это ещё и сбивает воспроизводимость ситуации из-за отличающихся таймингов, искомый плейсхолдер просто не появляется совсем. Предполагаю, что пока я тыкаю этот злосчастный F8 тридцать раз, загрузка картинки где-то там уже успевает в фоне завершится, и движок вместо использования плейсхолдера, который я хочу спрятать, берёт и сразу подставляет готовую картинку. Если это так, то никакие Breakpoints не подойдут. Ну разве что я смогу случайно найти точку в коде, которая отвечает ровно за эту функциональность, но если бы я мог её сам найти, мне бы уже не нужна была вся эта возня.
Почему же, ё-моё, ты нигде не пишешь «ё»?
Re[3]: Как заморозить в отладчике меняющийся DOM?
От: rFLY  
Дата: 24.06.24 16:37
Оценка:
Здравствуйте, CaptainFlint, Вы писали:

CF>Разные ситуации. Например, на IMDB регулярно само вылогинивает, а потом начинает задалбывать всплывашкой "а не хотите ли обратно залогиниться?", которая выскакивает как раз поверх рейтинга, закрывая его собой.

Этот просто скрывается. Вот его селектор:
document.querySelector('.sc-eKYSwk.fgdzQD.navbar__coachmark.navbar__coachmark--hide');

Замени класс navbar__coachmark--hide, который его скрывает, на navbar__coachmark--fadeIn и элемент появится. Обычно такие элементы расположены либо внутри элемента на который они указывают или за ним.
Re[4]: Как заморозить в отладчике меняющийся DOM?
От: CaptainFlint Россия http://flint-inc.ru/
Дата: 24.06.24 17:51
Оценка:
Здравствуйте, rFLY, Вы писали:

CF>>Разные ситуации. Например, на IMDB регулярно само вылогинивает, а потом начинает задалбывать всплывашкой "а не хотите ли обратно залогиниться?", которая выскакивает как раз поверх рейтинга, закрывая его собой.

FLY>Этот просто скрывается. Вот его селектор:

Этот — возможно. Но на Discord элемент именно уничтожается. Пару раз я успел тыкнуть по нему, пока светилась заглушка, и заметил, как она подсветилась в дереве элементов, и прежде чем я успел среагировать, удалилась, и вместо неё появился новый элемент с картинкой. Один раз даже заскриншотить успел, и на основе этого скрина написал-таки стиль. Но несколько дней назад они у себя что-то поменяли и стиль больше не работает, а каждый раз повторять эту гимнастику мне не хочется, хочется выяснить, есть ли более разумные способы ловли таких исчезающих элементов.
Почему же, ё-моё, ты нигде не пишешь «ё»?
Re[3]: Как заморозить в отладчике меняющийся DOM?
От: rFLY  
Дата: 24.06.24 18:15
Оценка:
Здравствуйте, CaptainFlint, Вы писали:

CF>Конкретно mutation в моём случае не подходит, так как для этого этот listener уже должен существовать.

я вот тут
Автор: rFLY
Дата: 18.05.24
писал как можно переопределить скрипт подтягиваемый с сервера, попробуй
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.