Как с помощью инструментов разработчика (devtools) узнать, что изменяет текст HTML-элемента?

У нас есть страница на GitHub: <br/> <a href="https://github.com/nulldg/DiscordChatExporterPlus/blob/master/DiscordChatExporter.Cli/Commands/Base/ExportCommandBase.cs" rel="nofollow">https://github.com/nulldg/DiscordChatExporterPlus/...</a> <br/> <br/> На этой странице отображается код, и первая строка выглядит так: <br/> <code class="cs">using System;</code> <br/> <br/> Я хочу изменить HTML-код страницы с помощью инструментов разработчика так, чтобы вместо строки <br/> <code class="cs">using System;</code> <br/> отображалась строка <br/> <code class="cs">using MySystem;</code> <br/> <br/> Задача кажется простой: необходимо выделить текст <code class="cs">using System;</code>, нажать правую кнопку мыши, выбрать "Inspect", найти этот текст в инспекторе и изменить его на желаемый. <br/> <br/> Когда я открываю инспектор, у меня автоматически выделяется элемент textarea с нужным текстом. Я нахожу строку <code class="cs">using System;</code>, заменяю её на <code class="cs">using MySystem;</code>, но на экране изменения не отображаются. При нажатии в рабочей области браузера текст возвращается к <code class="cs">using System;</code>. <br/> <br/> Это может означать, что текст в textarea не сохраняется, а только отображается. Разработчики, вероятно, хранят текст <code class="cs">using System;</code> где-то еще и синхронизируют его с содержимым HTML элемента textarea. <br/> <br/> Я также попробовал использовать CTRL+F в инспекторе, чтобы найти все вхождения <code class="cs">using System;</code> (их оказалось два) и заменить их на <code class="cs">using MySystem;</code>. Однако визуальные изменения снова не произошли, и при щелчке в рабочую область браузера изменения сразу откатываются обратно.
  • 15 октября 2024 г. 12:03
Ответы на вопрос 2
Изменение HTML-кода страницы с помощью инструментов разработчика (DevTools) в браузере, как правило, временно, и изменения могут быть откатаны, если JavaScript на странице перерисовывает содержимое. Если вы столкнулись с проблемой, что ваши изменения не сохраняются и откатываются, это означает, что существует скрипт, который управляет содержимым страницы и обновляет его.

Вот шаги, которые вы можете выполнить, чтобы попробовать решить эту проблему:

1. **Выключить JavaScript**: Попробуйте временно отключить JavaScript в браузере. Это может остановить любые скрипты, которые перезаписывают содержимое страницы. В Chrome вы можете это сделать, зайдя в "Settings" -> "Privacy and security" -> "Site Settings" -> "JavaScript" и отключив его. Затем обновите страницу и попробуйте снова изменить текст.

2. **Исследование элементов**: Используйте инструменты разработчика, чтобы определить, какой именно элемент снова возвращается к оригинальному значению. Вы можете использовать вкладку Elements, чтобы отслеживать изменения в элементах DOM.

3. **Поиск в скриптах**: Определите, какой JavaScript код отвечает за обновление текста. Это может быть реализовано через функции, триггерные события или даже WebSocket. На вкладке "Sources" в инструментах разработчика вы сможете просмотреть все загруженные скрипты и посмотреть, какие из них могут быть связаны с текстом.

4. **Изменение через консоль**: Если вы нашли JavaScript-функцию, ответственную за обновление текста, вы можете попробовать сделать свои изменения через консоль. Можно использовать `document.querySelector` (или аналогичные методы) и задать новое значение для нужного элемента, например:

   ```javascript
   document.querySelector('selector').textContent = 'using MySystem;';
   ```

   Замените `selector` на соответствующий селектор для нужного элемента.

5. **Мониторинг событий**: Если текст обновляется из-за определенного события (например, при переключении вкладок или прокрутке), вы можете попробовать понаблюдать за тем, как и когда обновляется текст, используя вкладку "Event Listeners" в инструментах разработчика.

6. **Сохранение изменений**: Чтобы изменения были постоянными (хотя бы до обновления страницы), вам также может понадобиться использовать расширение для браузера, такое как Tampermonkey, которое позволяет запускать пользовательские скрипты при загрузке страницы.

Эти шаги могут помочь вам найти способ временно изменить текст на странице, даже если он управляется через JavaScript.
Если в инспекторе удалить textarea, то можно увидеть что блок с кодом со страницы не пропал. Если это повторить ещё несколько раз, каждый раз тыкая в то место, где визуально находиться элемент, то можно дойти до .react-code-lines где и лежат блоки с текстом. А через поиск они не находятся, потому что они не идут одной непрерывной строкой 
Похожие вопросы