Как изменить текст на сайте через код элемента навсегда - Исправление ошибок и поиск оптимальных решений проблем

Как сделать так, чтобы изменения в Инструментах разработчика браузера сохранялись после перезагрузки страницы

Инструменты разработчика веб браузеров — это мощнейший инструмент для отладки работы веб сайтов. Если вы ещё не знакомы с ним, то обратитесь к статье «Статический анализ исходного кода веб-сайта в браузере».

Используя Инструменты разработчика возможно выполнить любые изменения HTML разметки, стилей и JavaScript кода «на лету», наблюдая за изменения в реальном времени.

Сделанные изменения пропадают сразу после перезагрузки страницы. Если вам нужно, чтобы изменения кода, сделанные в Инструментах разработчика браузеров, сохранялись после перезагрузки страницы, то данная статья расскажем вам, как это сделать на примере Google Chrome (Chromium).

Откройте Инструменты разработчика (клавиша F12) и перейдите во вкладку «Sources», там найдите раздел «Overrides»:

Кликните на «Select folder for overrides», выберите папку, куда будут сохраняться файлы для перезаписи файлов сайтов. На запрос о правах доступа, нажмите кнопку «Разрешить»:

Поставьте галочку «Enable Local Overrides». Если вы не видите этот флажок, то перезапустите веб-браузер и вернитесь на эту влкадку Инструментов веб-разработчика.

После этого в «Sources» → «Page» в контекстном меню для любой страницы будет доступно «Save for overrides»:

Теперь все файлы, для которых вы выбрали «Save for overrides» будут сохранены на жёсткий диск. Вы можете делать любые изменения в них и они также будут сохранены на постоянной основе. И при повторном открытии сайтов вместо оригинальных файлов будут использованы сохранённые вами версии.

На вкладке «Sources» → «Overrides» вы увидите список всех сохранённых файлов для всех сайтов:

Как отменить Overrides (локальные переопределения)

На вкладке «Sources» → «Overrides» выберите файл, который вы не хотите использовать, чтобы вновь задействовалась оригинальная копия с сайта, нажмите на него правой кнопкой мыши и выберите «Delete»:

Как при открытии сайта не использовать определённые файлы скриптов или стилей

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

Как добавить скрипт или стили при открытии сайта

Вы можете добавить код или стили в уже существующие файлы с помощью Overrides. Либо обратите внимание на вкладку «Sources» → «Snippets». Если вы не видите пункт Snippets, то нажмите на кнопку » чтобы развернуть полный список пунктов.

Как сохранить html страницу после редактирования Developer tool chrome?

Удобно редактировать некоторые элементы когда через Инструмент разработчика Developer tool в браузере chrome.
Вопрос — как сохранить изменения в HTML коде в после изменения редакторе элементов хрома.

Когда я пытаюсь сохранить страницу из браузера при помощи ctrl+s получается следущее:

Вот я внес единственное изменение — поменял цвет на красный

ctrl+s и есть два выбора, при сохранении «только HTML» ничего не сохраняется

А при сохранении полной страницы, добавляется в код к ссылкам непонятная фигня

Как сохранить изменения в html коде сайта

Fadanir Участник Группа: Members Зарегистрирован: 06-10-2014 Сообщений: 9 UA: Firefox 32.0

Источник

Меняем текстовое содержимое элемента

Мы нашли нужный элемент и вывели в консоль его текстовое содержимое. Но для нашей задачи это содержимое нужно изменить. Как это сделать? Присвоим свойству textContent новое значение.

Возьмём абзац с текстом:

И перезапишем его текстовое содержимое:

Обратите внимание, что строки с текстом нужно заключать в кавычки.

Когда инструкция выполнится, текст внутри абзаца изменится:

Когда мы присваиваем свойству textContent новое значение, оно полностью заменяет собой старое. Как и в случае с переключением классов, JavaScript не влияет на исходную разметку, а меняет текст прямо в браузере пользователя.

Свойство textContent предназначено только для текста, если записать туда HTML-теги, браузер их не поймёт.

Как быстро редактировать текст на странице с помощью консоли разработчика Chrome

При работе с контентом на сайте часто требуется вносить изменения или править различные текстовые блоки прямо на странице. В большинстве случаев это можно сделать через выделение элемента и правку в коде.

Однако существует специальная команда document.designMode = ‘on’ которая позволяет окно браузера с содержимым страницы с легкостью превратить в текстовый редактор.

That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN

— Tomek Sułkowski (@sulco) September 27, 2019

Для вызова команды вам потребуется произвести несколько несложных действий:

Откройте на нужной странице консоль администратора (вызывается нажатием клавиши F12 или Ctrl+Shift+I);
В появившемся окне выберите вкладку консоль;
Укажите команду document.designMode = ‘on’ ;
Далее нажмите Enter и приступайте к изменению контента на странице — установите курсор в нужном фрагменте текста и вносите любые правки.

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

Для чего будет полезна команда:

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

Если вам интересно узнать больше о возможностях консоли администратора Chrome, то рекомендую посмотреть запись Chrome Dev Summit 2016.

Хотите еще больше похожих выступлений? Посетите официальную страницу саммита. Здесь вы найдете ссылки на записи других выступлений за все предыдущие года.

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

Как пользоваться вкладкой Elements

Инструменты разработчика в браузерах очень мощные. Они помогут отредактировать страницу прямо в браузере, даже не особо зная, что такое HTML. Можно заменять текст, картинки, передвигать целые блоки на лету, т.е. прямо в браузере, не сохраняя никаких файлов. Правда, эти изменения носят временный характер: при обновлении страницы изменения пропадают.

Инструменты отлично подходят, когда хочется “попробовать, как это выглядит”.

В этой статье мы пользуемся браузером Google Chrome, но в других браузерах всё работает схожим образом.

Поменять текст

Чтобы заменить любой текст на странице, достаточно кликнуть правой клавишей мыши по нужному тексту и выбрать “Просмотреть код”. Откроется код этого элемента, где вы сразу увидите нужный текст. Кликните по нему дважды, чтобы заменить. При нажатии на Enter вы увидите, что текст поменялся и на странице.

Попробуйте повторить приём ниже. Где пробовать.

Поменять картинку

Чтобы заменить картинку, нужно найти её путь: обычно это какая-то длинная ссылка внутри элемента с названием img. Довольно просто, ничем не отличается от смены текста.

В примере ниже мы задумали у второго урока поставить такую же картинку, как у первого. Попробуйте повторить приём ниже. Где пробовать.

Обратите внимание на прикольную фичу: при наведении на ссылку Chrome показывает миниатюрку картинки, которая лежит по этой ссылке. Мелочь, а приятно.

Найти блок вёрстки

Весь HTML устроен иерархически: большие элементы на странице складываются из элементов поменьше, а те, в свою очередь, тоже делятся на части и так пока не дойдёт дело до самых простых элементов на странице — текста, картинок и прямоугольников. Например, на странице Энциклопедии Девмана есть строка, в которой лежит 3 списка из рубрик энциклопедии.

Видно, что они “вложены” в строку — при желании их можно “свернуть”:

При наведении на строчки элементы на странице будут выделяться синим. Чтобы выделить весь элемент поднимайтесь “наверх” по коду, пока он не выделится целиком. Если выделилось слишком много, то вы поднялись слишком высоко, теперь спускайтесь обратно. Перемещайтесь по элементам, пока не найдете нужный.

Найденный элемент можно отредактировать прямо в браузере, выбрав в контекстном меню Edit as HTML . Правда, в файл изменения не попадут. Ещё можно разом скопировать весь блок с вложенными в него элементами или даже удалить их все. О том как это сделать читайте ниже.

С инструментами разработчика любой блок на странице сайта найти проще простого, но вот повторить трюк с текстовым редактором и HTML файлом будет куда сложнее. Ориентируйтесь по названию тега, его классам и его родителям. Например:

С помощью инструментов разработчика вы поняли, что вам нужен элемент <div js-article-content»> . Значит в файле надо искать тег div с классами row и js-article-content и с родителями body и article . Задача сильно упростится, если в редакторе свернуть часть кода, в англоязычном интерфейсе этот приём называется code folding .

Помните, что на странице может быть много одинаковых с виду элементов, с одинаковым тегом и классами. Ориентируйтесь прежде всего на родителей — внутри каких элементов он находится. Начинайте поиск с тега <body> — этот элемент на странице всегда один и находится на самом верху.

В коде теги ищут по их родителям

Скопировать элемент

Если вы уже нашли элемент через инструменты разработчика, то кликните по нему правой кнопкой мыши и в выпадающем меню выберите Copy outerHTML . HTML разметка скопирована в буфер обмена, теперь можете вставить её в текстовый редактор.

Удалить элемент

Чтобы удалить элемент, нужно так же кликнуть по нему правой кнопкой мыши и выбрать “Просмотреть код”. Далее выберите его целиком. Когда вы выберете нужный элемент — жмите Delete .

В этой гифке мы задумали удалить вторую статью “Как установить Python”. Попробуйте повторить приём ниже. Где пробовать.

В гифке видно, как мы “поднимаемся” наверх, выделяя всё больше. Как только “поднялись” достаточно — свернули всё, что внутри с помощью “стрелочки” слева. Стало видно, что некие li — это элементы списка (на самом деле это list item), а в некоем ul лежит весь список (это unordered list).

Попробуйте бесплатные уроки по Python

Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.

Источник

После этого в «Sources» → «Page» в контекстном меню для любой страницы будет доступно «Save for overrides»:

На вкладке «Sources» → «Overrides» вы увидите список всех сохранённых файлов для всех сайтов:

Как отменить Overrides (локальные переопределения)

Как при открытии сайта не использовать определённые файлы скриптов или стилей

Как добавить скрипт или стили при открытии сайта

Связанные статьи:

Как сделать скриншоты всей страницы сайта в Google Chrome без использования плагинов (52.7%)
Как включить спрятанный режим чтения Google Chrome (52.7%)
Как отключить всплывающие подсказки для вкладок в Google Chrome (52.7%)
Как в Google Chrome включить панель закладок (52.7%)
Как включить и использовать группы вкладок в Google Chrome (52.7%)
Как найти непрочитанные письма в Gmail (RANDOM — 50%)

Источник

Полезная информация

Заказывай стафф с атрибутикой Mozilla и… пусть все вокруг завидуют тебе! Быть уникальным — быть с Mozilla!

Тема закрыта

Страницы: 1

Форумы
» Firefox
» Сохранение измененного кода страницы

№106-10-2014 21:39:54

Fadanir: Участник; Группа: Members; Зарегистрирован: 06-10-2014; Сообщений: 9; UA: 32.0

Сохранение измененного кода страницы

Через меню «исследовать элемент» можно менять html код страницы. Кто-то знает как можно закрепить эти изменения, чтобы после обновления они оставались. Может плагин какой есть. Гугл не дает ничего внятного на эту тему.

Отсутствует

№207-10-2014 14:52:30

Fadanir: Участник; Группа: Members; Зарегистрирован: 06-10-2014; Сообщений: 9; UA: 32.0

Re: Сохранение измененного кода страницы

Ни то, ни другое, не дает желаемого эффекта.

Отсутствует

№307-10-2014 15:27:08

littleleshy: ________; Группа: Members; Откуда: Москва; Зарегистрирован: 13-12-2008; Сообщений: 2504; UA: 35.0

Re: Сохранение измененного кода страницы

Fadanir пишет

чтобы после обновления они оставались

После обновления чего?
Если ты хочешь внести изменения в код, хранящийся не на твоём сервере, это невозможно в силу того, что у тебя нет прав на запись туда.
Если ты хочешь внести изменения в код, хранящийся на твоём сервере, это невозможно в силу того, что многие страницы имеют динамический контент, такие страницы составляются на сервере, а браузер отображает готовый вариант, изменения в который вносить бессмысленно — та страница, которую ты видишь в данный момент, уникальна. Она может выглядеть по-другому у другого пользователя или даже у тебя, если её обновить. Браузеры не доросли, и вряд ли дорастут то того, чтобы вносить необходимые изменения в шаблоны, БД и т. д.
И да, Firefox — не редактор, а обозреватель.
Кстати, хочу заметить, что по Ctrl+S сохраняется страница с учётом изменений в Инспекторе.

Отсутствует

№407-10-2014 16:21:26

Fadanir: Участник; Группа: Members; Зарегистрирован: 06-10-2014; Сообщений: 9; UA: 32.0

Re: Сохранение измененного кода страницы

Я знаю, что браузер показывает результат интерпретации кода на сервере. Но неужто так трудно научить браузер игнорировать к примеру определенный элемент, по типу того, как это делает адблок, только произвольно.

Добавлено 07-10-2014 16:21:59

littleleshy пишет

Fadanir пишет

чтобы после обновления они оставались

После обновления чего?
Если ты хочешь внести изменения в код, хранящийся не на твоём сервере, это невозможно в силу того, что у тебя нет прав на запись туда.
Если ты хочешь внести изменения в код, хранящийся на твоём сервере, это невозможно в силу того, что многие страницы имеют динамический контент, такие страницы составляются на сервере, а браузер отображает готовый вариант, изменения в который вносить бессмысленно — та страница, которую ты видишь в данный момент, уникальна. Она может выглядеть по-другому у другого пользователя или даже у тебя, если её обновить. Браузеры не доросли, и вряд ли дорастут то того, чтобы вносить необходимые изменения в шаблоны, БД и т. д.
И да, Firefox — не редактор, а обозреватель.
Кстати, хочу заметить, что по Ctrl+S сохраняется страница с учётом изменений в Инспекторе.

После обновления страницы.

Добавлено 07-10-2014 16:27:31
Вот к примеру есть на сайте миничат, и меня он раздражает. Мешает работать с сайтом. Миничат находится в элементе <div id=»nChat»>. Если я его удалю в редакторе кода, то на странице он исчезнет, но если я обновлю страницу, то он снова появится. Так вот собственно в том и задача, чтобы плагин запоминл, что каждый раз когда обновляется страница нужно удалять этот элемент и не показывать его мне. Адблок делает примерно тоже самое, так что не говорите мне что это невозможно.

Отредактировано Fadanir (07-10-2014 16:27:31)

Отсутствует

№507-10-2014 16:45:16

turbot: Участник; Группа: Members; Зарегистрирован: 09-10-2011; Сообщений: 2529; UA: 35.0

Re: Сохранение измененного кода страницы

Адблок делает примерно тоже самое

Ну так и что мешает его и использовать? Или скрывать/менять неугодные элементы с помощью css? Ну и еще этим можно.

Отсутствует

№607-10-2014 22:51:41

Fadanir: Участник; Группа: Members; Зарегистрирован: 06-10-2014; Сообщений: 9; UA: 32.0

Re: Сохранение измененного кода страницы

turbot пишет

Адблок делает примерно тоже самоеНу так и что мешает его и использовать? Или скрывать/менять неугодные элементы с помощью css? Ну и еще этим можно.

Адблоком не выходит. А плагин YARIP дает тот же эффект, что и правка кода вручную. Элемент исчезает, но после обновления страницы появляется вновь. Эффект не закрепляется. С фоксреплейсом не разобрался. Как менять элементы через css тоже не в курсе.

Отредактировано Fadanir (07-10-2014 22:55:21)

Отсутствует

№707-10-2014 23:05:14

villa7: Участник; Группа: Members; Зарегистрирован: 21-07-2012; Сообщений: 2235; UA: 32.0

Re: Сохранение измененного кода страницы

Fadanir
Если я правильно понял нужно скрыть id=nChat

добавить в userContent

Лучше спросить у знающих — чем лезть не зная.

Отсутствует

№807-10-2014 23:49:46

turbot: Участник; Группа: Members; Зарегистрирован: 09-10-2011; Сообщений: 2529; UA: 35.0

Re: Сохранение измененного кода страницы

Fadanir пишет

не выходит не закрепляется не разобрался не в курсе

А, ну так вы бы указали, что познаний нет. Я-то думал вам только инструмент нужен, а уж там вы разгуляетесь.
Изучайте, раз уж потребность такая имеется. css, правила для адблока. В адблоке, простейшие правила скрытия, можно с помощью этого сделать. (И вообще, у него даже кнопочка в инспекторе своя есть, позволяющая скрыть выделенный элемент:
)

Отсутствует

№907-10-2014 23:57:57

Fadanir: Участник; Группа: Members; Зарегистрирован: 06-10-2014; Сообщений: 9; UA: 32.0

Re: Сохранение измененного кода страницы

turbot пишет

Fadanir пишет

не выходит не закрепляется не разобрался не в курсе

А, ну так вы бы указали, что познаний нет. Я-то думал вам только инструмент нужен, а уж там вы разгуляетесь.
Изучайте, раз уж потребность такая имеется. css, правила для адблока. В адблоке, простейшие правила скрытия, можно с помощью этого сделать. (И вообще, у него даже кнопочка в инспекторе своя есть, позволяющая скрыть выделенный элемент:
https://lh4.ggpht.com/-nyNMbe3puQs/VDRA … /thumb.jpg)

Вариант с правилом для адблока это наверное то, что мне нужно, вот только у меня нет его иконки возле инспектора, как у вас на скриншоте. Может адблок другой. Вроде тоже стоит адблок плюс.

Добавлено 07-10-2014 23:58:28

villa7 пишет

Fadanir
Если я правильно понял нужно скрыть id=nChat

добавить в userContent

А где искать userContent?

Отредактировано Fadanir (07-10-2014 23:58:28)

Отсутствует

№1008-10-2014 00:20:19

turbot: Участник; Группа: Members; Зарегистрирован: 09-10-2011; Сообщений: 2529; UA: 35.0

Re: Сохранение измененного кода страницы

Fadanir пишет

нет его иконки возле инспектора

https://addons.mozilla.org/ru/firefox/a … idehelper/ — я же дал ссылку.

Fadanir пишет

де искать userContent

Создать в папке профиля папку chrome, в нем файл userContent.css, либо Stylish.

Отсутствует

№1108-10-2014 01:25:57

Fadanir: Участник; Группа: Members; Зарегистрирован: 06-10-2014; Сообщений: 9; UA: 32.0

Re: Сохранение измененного кода страницы

Есть контакт. Мне нужен был «элементхайдинг». Благодарю всех откликнувшихся. Тему можно закрывать.

Отсутствует

Тема закрыта

Страницы: 1

Форумы
» Firefox
» Сохранение измененного кода страницы

Источник

В примере 3 «div» при нажатии меняют цвет. Вопрос как сделать так чтобы это все сохранялось и при перезагрузке страницы изменения сохранялись. Например зашел пользователь пощелкал остановился на втором. Вышел на следующий день зашел на сайт а активный див остался тот же что он щелкнул последний раз.

Буду рад даже литературе в этом направлении. Заранее спасибо=)

$('.toggler').click(function () {
          $('.toggler').removeClass('toggler_active');

          var toggler = $(this);
          toggler.addClass('toggler_active');
                  });

.toggler {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
  }
.toggler_active {
background-color: green;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='toggler toggler_active'></div>
<div class='toggler'></div>
<div class='toggler'></div>

задан 22 дек 2016 в 8:09

Евгений ЛюбимовЕвгений Любимов

3851 золотой знак3 серебряных знака17 бронзовых знаков

Если у вас на сайте нет процедуры регистрации и возможности хранить эту информацию на сервере, то можно посоветовать вам использовать localStorage для хранения этой информации в браузере пользователя, например:

Записываем выбор:

localStorage.setItem('squareNumber', '2');

При загрузке страницы считываем предыдущий выбор:

var squareNumber = localStorage.getItem('squareNumber');

Естественно, это будет работать только если пользователь будет заходить с одного и того же компьютера.

ответ дан 22 дек 2016 в 8:16

Источник