Как изменить html код страницы в браузере

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

Для изменения исходного кода страницы не обязательно хорошо знать HTML и CSS. Далее вы это сами увидите.

Редактирование html кода в браузере

Мы будем менять данные на сайте.  Изменения в коде  будут видны только нам.  При обновлении страницы они исчезнут. 

Откройте в браузере страницу сайта, в которой необходимо изменить код. Это можно

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

В контекстном меню нажимаем Edit as HTML и у нас появится выделенный код.

При такой редакции мы видим сразу результат. 

Вверху картинки отмеченное красной рамкой HTML код, который находится в шапке сайта. Стиль которого мы поменяем.

Внизу красной стрелкой показано style.css:473. Находится в Консоли> Внешний вид>Редактор темы>файл style.css строка 473. Как можно это использовать?

Эти изменения можно использовать следующим образом. Копируем в блокнот Notepad++ с расширением html. Если это Ваш сайт, то  вносим изменения в файлы на веб-сервере.

Или эти изменения можно внести в Консоли административной панели сайта. В Редакторе темы файлов.

С помощью подмены HTML кода, мы сможем изменить открытую веб-страницу как захотим.
Умение изменить исходный код страницы – дает отличный навык для продвинутого пользователя Интернета.

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

Редактирование CSS во встроенном редакторе

Знаете CSS – можно отредактировать и сделать предварительный просмотр изменений во встроенном редакторе CSS.

Для этого заходим в Консоль админ панели. При наведении курсора на Внешний вид выпадает меню где нажимаем на Редактировать CSS

Открывается с левой стороны окно для редактирования.

Нажимаем на Дополнительные стили и открывается поле для загрузки кода CSS.

Код CSS в котором  будем производить изменения копируем и вставляем в вышеуказанное поле.

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

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

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

Также можно Запланировать публикацию произведенных изменений по времени.  День, Месяц, Год и Время выставляем по своему желанию.

Далее мы можем посмотреть полную историю произведенных нами изменений. Это очень удобно в истории отражены изменения данных до и после.

Или мы можем просто отменить изменения. Нажав на пиктограмму корзины.