Как редактировать html-код в браузере

Обновлено: 23.11.2024

Смотрел на ваш веб-сайт и зацикливался на нескольких мелочах, которые кажутся неправильными.

Возможно, это текст, шрифт, интервалы, цвета или что-то еще.

В любом случае, вы хотели бы просто быстро отредактировать и нажать "Сохранить", когда все выглядит идеально.

Хорошей новостью является то, что современные браузеры (такие как Chrome, Firefox и Safari) предлагают несколько способов предварительного просмотра простых изменений на любой веб-странице. Да, любая веб-страница. Даже те, которые вам не принадлежат!

Это означает, что вы можете изменять HTML и CSS (также известный как исходный код) прямо в браузере.

Имейте в виду, что это только изменяет локальную версию на вашем компьютере и фактически ничего не перезаписывает на сервере. Это просто предварительный просмотр.

Но подождите, это еще не все!

Теперь есть способ внести изменения в свой веб-сайт с помощью инструментов разработчика вашего браузера, которые можно навсегда сохранить на сервере, так что продолжайте читать!

Вот пошаговый процесс редактирования веб-страницы с помощью Google Chrome.

Как редактировать веб-сайт с помощью инструментов разработчика

  • Откройте любую веб-страницу в Chrome и наведите указатель мыши на объект, который хотите изменить (например, на текст, кнопки или изображения).
  • Щелкните объект правой кнопкой мыши и выберите "Проверить" в контекстном меню. Инструменты разработчика откроются в нижней половине экрана, а выбранный элемент будет выделен в интерфейсе, также известном как DOM.
  • Дважды щелкните выбранный объект, и он переключится в режим редактирования. Вы можете заменить атрибуты текста или стиля (например, цвета, шрифты, интервалы), а затем щелкнуть за пределами DOM, чтобы применить изменения.
  • Используйте ярлык «Поиск», чтобы упростить поиск определенного текста или атрибутов стиля. («CMD + F» на Mac или «CTRL + F» на ПК)

Редактируйте любой текст веб-сайта с помощью нашего удобного букмарклета

  • Выделите выделенное жирным шрифтом ниже:

javascript:document.body.contentEditable = 'true'; document.designMode = 'включено'; пустота 0

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

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

Это не может быть проще. Если ваш веб-сайт создан и размещен на Pagecloud, вы можете использовать инструменты разработчика своего браузера, чтобы внести постоянные изменения в любую из ваших веб-страниц.

Использование инструментов разработчика с Pagecloud:

  • Войдите в Pagecloud.
  • Перейдите на страницу вашего веб-сайта, которую вы хотите изменить.
  • Нажмите на символ "изменить страницу" в правом нижнем углу. Если вы его не видите, обновите страницу. («CMD + R» на Mac или «CTRL + R» на ПК).
  • После загрузки редактора выполните следующие действия.
  • Нажмите "Сохранить" в редакторе или используйте сочетание клавиш: ("CMD + S" на Mac или "CTRL + S" на ПК).

Легко, верно?

Как насчет еще лучших новостей? Вы можете обойти инструменты разработчика и просто внести изменения прямо в редакторе.

PageCloud позволяет полностью настраивать страницы, даже не обращаясь к исходному коду. Просто нажмите и отредактируйте с помощью палитры. Если вы никогда не писали код, этот интерфейс будет гораздо более удобным!

Прочитайте Как создать профессиональный веб-сайти другие советы по созданию веб-сайта с помощью PageCloud

Если вы разработчик и хотите вывести свой сайт на новый уровень, вы можете получить доступ к редактору JavaScript с помощью сочетания клавиш «J + S» при входе в редактор веб-сайта PageCloud.

Никогда не слышали о Pagecloud?

Попробуйте бесплатно сегодня и создайте собственный веб-сайт, который дает вам полную свободу вносить любые изменения, которые вы хотите! Pagecloud также предлагает электронную коммерцию, которая позволяет вам создавать и проектировать интернет-магазин для продажи товаров, услуг и многого другого! Подпишитесь на бесплатную пробную версию и начните работу с Pagecloud!

Крис Хоффман

Крис Хоффман
Главный редактор

Крис Хоффман – главный редактор How-To Geek. Он писал о технологиях более десяти лет и два года был обозревателем PCWorld. Крис писал для The New York Times и Reader's Digest, давал интервью в качестве эксперта по технологиям на телевизионных станциях, таких как NBC 6 в Майами, и освещал свою работу в новостных агентствах, таких как Би-би-си. С 2011 года Крис написал более 2000 статей, которые были прочитаны почти миллиард раз — и это только здесь, в How-To Geek. Подробнее.

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

Эта функция использует преимущества функции «document.designMode», которую можно включить с помощью консоли JavaScript веб-браузера. Недавно Томек Сулковски отметил это в Твиттере, но это так здорово, что мы должны поделиться этим с нашими читателями.

Вы можете использовать эту функцию, чтобы очистить веб-страницу перед ее печатью, проверить, как будут выглядеть изменения на веб-странице, или даже просто разыграть людей. Это будет похоже на редактирование документа Word — не нужно возиться с HTML.

Чтобы активировать эту функцию, посетите веб-страницу и откройте консоль разработчика. Чтобы открыть консоль в Google Chrome, выберите меню > Дополнительные инструменты > Инструменты разработчика или нажмите Ctrl+Shift+i.

Хотя мы используем Chrome в качестве примера, эта функция работает и в других современных браузерах. Вот как открыть консоль в других браузерах:

  • В Mozilla Firefox выберите меню > Веб-разработчик > Веб-консоль или нажмите Ctrl+Shift+K.
  • В Apple Safari нажмите «Safari» > «Настройки» > «Дополнительно» и включите параметр «Показывать меню «Разработка» в строке меню». Затем нажмите «Разработка» > «Показать консоль JavaScript».
  • В Microsoft Edge выберите меню > Дополнительные инструменты > Инструменты разработчика или нажмите F12, а затем перейдите на вкладку "Консоль".

Перейдите на вкладку "Консоль" в верхней части панели "Инструменты разработчика". Введите в консоль следующее и нажмите Enter:

Теперь при желании вы можете закрыть консоль и редактировать текущую веб-страницу, как если бы это был редактируемый документ. Щелкните где-нибудь, чтобы вставить курсор и ввести текст. Используйте клавиши Backspace или Delete, чтобы удалить текст, изображения и другие элементы.

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

Вы даже можете вернуться в консоль и запустить следующую команду, чтобы отключить режим конструктора:

Веб-страницу больше нельзя будет редактировать, но ваши изменения сохранятся до тех пор, пока вы не обновите страницу в следующий раз.

  • › Что делают ваши функциональные клавиши в Chrome DevTools
  • › Как отключить (и включить) JavaScript в Google Chrome
  • › Как взломать скрытую игру про динозавров в Google Chrome
  • › 7 основных функций Microsoft Excel для составления бюджета
  • › Худшее, что есть в телефонах Samsung, — это программное обеспечение Samsung.
  • › Почему СМС должен умереть
  • › Что такое GrapheneOS и как она делает Android более приватным?
  • › 5 вещей, которые вы, вероятно, не знали о GIF-файлах

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

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

Шаг 1. Запустите инструменты разработчика

Откройте Chrome, загрузите страницу из локальной файловой системы/сервера и откройте Инструменты разработчика в меню Дополнительные инструменты или нажмите F12 или Ctrl/Cmd + Shift + I в зависимости от вашей системы. Перейдите на вкладку "Источники", чтобы изучить файловый менеджер:

Вы можете открывать и редактировать файлы CSS и JavaScript в этом представлении, но все изменения будут потеряны, как только вы обновите страницу.

Шаг 2. Свяжите папку с рабочей областью

Перейдите на вкладку «Файловая система», затем нажмите «+ Добавить папку в рабочую область». Вам будет предложено найти вашу рабочую папку, и Chrome попросит вас подтвердить, что вы разрешаете доступ. Проводник показывает файлы в вашей системе, которые можно открыть одним щелчком мыши:

Шаг 3. Отредактируйте и сохраните код

Теперь вы можете перейти к редактированию кода. Несохраненные изменения отмечены звездочкой на вкладке файла.

Изменения CSS мгновенно обновляются, но в случае HTML и JavaScript обычно требуется нажать Ctrl/Cmd + S, чтобы сохранить файл в файловой системе, а затем обновить браузер.

Обратите внимание, что вы также можете щелкнуть правой кнопкой мыши вкладку файла и выбрать Сохранить как…, чтобы сохранить копию файла в другом месте.

Шаг 4. Просмотрите и отмените изменения

Чтобы просмотреть изменения, щелкните правой кнопкой мыши вкладку файла и выберите «Локальные изменения…» в контекстном меню:

Отображается вид, похожий на разницу. Значок стрелки в левом нижнем углу панели отменит все изменения и вернет файл в исходное состояние.

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

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

Как редактировать веб-страницы

Вот пошаговое руководство по редактированию текста веб-страницы, даже если этот веб-сайт не принадлежит вам.

  1. Откройте любую веб-страницу в Chrome и выберите текст на веб-странице, который вы хотите изменить.
  2. Щелкните правой кнопкой мыши выделенный текст и выберите "Проверить элемент" в контекстном меню.
  3. Инструменты разработчика откроются в нижней части браузера, и будет выбран соответствующий элемент DOM.
  4. Дважды щелкните выбранный узел, и он переключится в режим редактирования. Теперь измените текст в инструментах разработчика и нажмите за пределами окна инструментов разработчика Chrome, чтобы применить изменения.

Если вы знакомы с HTML-тегами, вы можете использовать ту же технику не только для редактирования текста на веб-страницах, но и для замены изображений, изменения стилей форматирования и т. д.

Техника Chrome Inspect Tool удобна для внесения нескольких быстрых правок, но если вы вносите несколько изменений текста на веб-страницу, есть лучший подход.

Редактировать веб-сайты как вики

Перейдите в меню браузера, выберите "Инструменты", выберите "Инструменты разработчика", а затем выберите "Консоль JavaScript". Если вы используете Safari для Mac, выберите меню «Разработка», а затем выберите «Показать консоль JavaScript». В Firefox выберите Инструменты > Веб-разработчик > Показать веб-консоль.

В окне консоли введите следующий код JavaScript в командной строке и нажмите Enter.

Это сделает всю вашу веб-страницу редактируемой, как вики или документ Word. Теперь вы можете щелкнуть в любом месте веб-страницы и начать печатать.

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

Читайте также: