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

Обновлено: 06.07.2024

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

Как отогнуть внешний слой, чтобы увидеть код?

Инструмент проверки элемента!

Давайте поговорим о том, как использовать инструмент Проверить элемент.

Что такое элемент проверки?

Элемент Inspect — это один из инструментов разработчика, встроенных в веб-браузеры Google Chrome, Firefox, Safari и Internet Explorer. Используя этот инструмент, вы можете просматривать и даже редактировать исходный код HTML и CSS, лежащий в основе веб-контента. Затем, когда вы вносите изменения в код, эти изменения отображаются в режиме реального времени в окне вашего браузера. И не беспокойтесь о поломке страницы, пока копаетесь в коде; ваши изменения вступят в силу только на время вашего сеанса и будут видны только на вашем экране. Другими словами, Inspect Element может дать вам своего рода опыт «что, если», не затрагивая других пользователей.

Для среднего посетителя сайта Inspect Element — не более чем любопытство, возможно, стоит отвлечься на несколько минут. Но для разработчиков сайтов, программистов и тех, кто интересуется программированием, этот инструмент разработчика предлагает ряд преимуществ.

Преимущества проверки элемента

Если вы действительно хотите что-то понять, полезно иметь возможность поэкспериментировать с этим. Inspect Element дает вам возможность покопаться в коде, на котором работает сайт, и узнать, как он работает.

Допустим, вы только начинаете программировать. Вы посещаете веб-страницу и видите, что на сайте есть элемент, который действительно привлекает ваше внимание. Может быть, это то, что вам было интересно включить в страницу, над которой вы работали; может быть, это что-то передовое, о чем вы никогда раньше не задумывались. В любом случае, вам любопытен код. Таким образом, вы используете Inspect Element, чтобы точно увидеть, что происходит.

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

И если вы заинтересованы в оптимизации своей страницы для повышения рейтинга в поисковых системах (ключевой фактор в цифровом маркетинге), использование Inspect Element на страницах конкурентов может дать вам представление о том, на каких ключевых словах они фокусируются. Вы также можете использовать этот инструмент для проверки скорости загрузки вашего сайта.

Это лишь несколько примеров того, для чего можно использовать Inspect Element. Но прежде чем вы сможете сделать что-либо из этого, вам сначала нужно узнать, как получить к нему доступ.

Доступ к элементу проверки в разных веб-браузерах

Inspect Element настолько полезен, что включен в качестве инструмента разработчика во все основные настольные веб-браузеры. Вот как получить доступ к Inspect Element в Google Chrome, Firefox, Safari и Internet Explorer.

Google Chrome

Чтобы использовать Inspect Element в Google Chrome, у вас есть несколько вариантов:

Нажмите правой кнопкой мыши любую область веб-страницы (включая пустые области) и выберите в меню Проверить.
Войдите в меню настроек Google Chrome (три вертикальные точки в правом верхнем углу панели управления окна браузера). В раскрывающемся меню выберите Дополнительные инструменты, а затем Инструменты разработчика.

Файрфокс

Подобно Google Chrome, Firefox также предоставляет несколько вариантов доступа к Inspect-Element:

Нажмите правой кнопкой мыши любую область веб-страницы (включая пустые области) и выберите в меню проверить.
Доступ к меню настроек Firefox. Выберите Инструменты, затем выберите Веб-разработчик и, наконец, выберите Инспектор.

Сафари

Safari следует тому же примеру, но прежде чем вы сможете использовать Inspect Element, вам нужно получить доступ к меню настроек Safari. В левом верхнем углу экрана выберите Настройки, а затем установите флажок Показать меню разработки в строке меню. После этого используйте следующие параметры:

Нажмите правой кнопкой мыши любую область веб-страницы (включая пустые области) и выберите в меню Проверить.
Откройте строку меню и нажмите Разработка, затем в раскрывающемся меню выберите Показать веб-инспектор.

Интернет-обозреватель

Internet Explorer также предлагает инструменты разработчика, позволяющие выполнять функции Inspect-Element:

Нажмите правой кнопкой мыши на странице и выберите Проверить элемент во всплывающем меню.
Для доступа к панели управления щелкните значок шестеренки в правом верхнем углу окна браузера или нажмите клавиши ALT+X. В раскрывающемся меню выберите Инструменты разработчика F12.

Сочетания клавиш

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

Учебник: Как изменить текст на веб-сайте

Вы знаете, что такое Inspect Element, какие преимущества он предлагает и как получить к нему доступ в каждом из основных браузеров. Что осталось?

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

Начните с выделения части текста. Для этого урока давайте воспользуемся следующим предложением:

Программирование — это круто!

Щелкните правой кнопкой мыши по выделенной области. В раскрывающемся меню выберите Проверить.

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

В этом новом окне вы увидите строку кода, выделенную синим цветом. Это код, который приводит предложение в действие и сообщает вашему браузеру, что должно быть сказано в предложении. На самом деле, вы должны увидеть предложение «Кодирование — это взрыв!» в пределах выделенной области. Дважды щелкните предложение.

Введите что-нибудь новое. Вы можете ввести все, что хотите, но мы не будем усложнять:

Программирование — это просто кайф!

Нажмите Enter.

Изменения должны обновиться на странице.

Поздравляем, вы только что использовали элемент проверки для изменения текста.

Копать глубже

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

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

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

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

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

Хорошей новостью является то, что современные браузеры (такие как 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!

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

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

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

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

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

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

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

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

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

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

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

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

Крис Хоффман

< бр />

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

Крис Хоффман – главный редактор How-To Geek. Он писал о технологиях более десяти лет и два года был обозревателем PCWorld. Крис писал для The New York Times, давал интервью в качестве эксперта по технологиям на телевизионных станциях, таких как NBC 6 в Майами, и освещал свою работу в таких новостных агентствах, как BBC. С 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, чтобы удалить текст, изображения и другие элементы.

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

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

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

› Как отключить (и включить) JavaScript в Google Chrome
› Что делают ваши функциональные клавиши в Chrome DevTools
› Как взломать скрытую игру про динозавров в Google Chrome
›5 шрифтов, которые следует прекратить использовать (и лучшие альтернативы)
› Почему не было Windows 9?
› Почему прозрачные чехлы для телефонов желтеют?
› Что означает XD и как вы его используете?
› Как восстановить метки панели задач в Windows 11

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