Допустим у нас есть страница на гитхабе:
https://github.com/nulldg/DiscordChatExporterPlus/...
На ней есть окошко с кодом. Первая строка этого кода:
using System;
Я хочу с помощью девтулзов так поменять HTML текст страницы что бы на экране вместо строки
using System;
отображалась строка
using MySystem;
Казалось бы, задача простая: нужно выделить текст
using System;
, нажать ПКМ -> Inspect, найти этот текст в инспекторе и поменять на желаемый.
Я открываю инспектор и у меня автоматически выделяется элемент textarea в котором находится нужный мне текст. Я нахожу строку
using System;
, меняю её на
using MySystem;
, однако на экране не происходит никаких изменений. При клике в рабочую область браузера только что изменённый текст откатывается обратно до
using System;
.
Ладно, видимо в этом textarea текст не хранится, а только показывается. Разработчики где то сохранили текст
using System;
и постоянно синхронизируют текст HTML элемента textarea с этим сохранённым текстом.
Я попробовал нажать CTRL+F в инспекторе, найти все вхождения
using System;
(их там 2) и заменить их на
using MySystem;
. Результат тот-же: визуальных изменений нет, а при клике в рабочую область браузера изменения мнгновенно откатываются.
Хорошо, давайте попробуем определить что именно "синхронизирует" текст в textarea с изначальным текстом. Если я смогу найти строку JS кода которая устанавливает текст в textarea то я смогу пройтись по этому коду вверх и понять где хранится "source of truth" кода. Я нажимаю на элементе textarea ПКМ -> Break On, выбираю все пункты (subtree modification, attribute modification, node removal) и снова провожу описанные процедуры. Текст в textarea снова сбрасывается до изначального, однако никакого break не происходит.
Как мне понять где хранится "source of truth" этого текста? У меня уже нет идей.