Обычно при редактировании веб-страницы мы используем специальный инструмент для редактирования, такой как Adobe Dreamweaver, CoffeeCup, Bluefish или один из других инструментов разработки. Но что, если мы просто проводим мозговой штурм или хотим попробовать что-то на живой странице? Мы могли бы сделать копию страницы в нашем инструменте выбора и поиграть с этим. Или мы могли бы сделать это в нашем веб-браузере. Из этого туториала вы узнаете, как редактировать веб-страницу в вашем браузере.
Называемый инструментами разработчика, Firefox вызывает функцию «Проверка элемента», а Chrome - «Проверка». В любом случае, это способ для браузера заглянуть за блеск вашего дизайна и взглянуть на код, управляющий им. Эта функция довольно хорошо известна и часто используется. Что не так хорошо известно, так это возможность вносить изменения в этот код на лету.
Любые сделанные вами изменения не будут сохранены и не повлияют на жизнь. Если вы не хотите загружать страницу в свой инструмент разработчика, это отличный способ экспериментировать.
Отредактируйте любую веб-страницу в вашем браузере
Dreamweaver и подобные инструменты имеют встроенный эмулятор браузера, который имитирует внешний вид дизайна в разных браузерах. Какими бы хорошими они ни были, они не всегда точны, и при запуске сайта вы часто обнаруживаете, что то, что выглядело фантастически в вашем инструменте разработчика, выглядит немного иначе в автономном браузере.
Обычно по этой причине вы запускаете сайт на внутреннем веб-сервере и тестируете в браузере, а затем запускаете его вживую. Если страница уже запущена или вы просто хотите что-то попробовать, вам не нужно копировать и загружать ее в свой инструмент разработки, вы можете просто использовать инструмент разработчика браузера.
Я использую Firefox, поэтому я покажу вам, как это использовать. Хотя Chrome почти такой же.
- Откройте веб-страницу, с которой вы хотите поэкспериментировать, в своем браузере.
- Щелкните правой кнопкой мыши в любом месте страницы и выберите «Проверить».
Вы должны увидеть, как ваша страница делится на две части, а внизу появляется новая панель с некоторым кодом. Этот код является движущей силой выбранной вами страницы. Различные элементы страницы доступны на вкладках в верхней части нижней вкладки. Например, мы видим Инспектор, Консоль, Отладчик, Редактор стилей и так далее в Firefox.
Если вы наведете курсор на линии в нижней панели, вы увидите выделение различных частей веб-страницы. Строка кода, которой вы пользуетесь во время выделения, - это код, который влияет на эту часть страницы.
- Если вы хотите поэкспериментировать с тем, как выглядит страница, попробуйте редактор стилей.
- Если вы хотите поэкспериментировать с тем, как работает страница, попробуйте Console или Accessibility.
- Если вы хотите устранить ошибки или решить проблему, используйте консоль или отладчик
Производительность полезна для SEO на месте, но память, сеть и хранилище используются не так часто.
Помните, что вы можете возиться с инструментами разработчика сколько угодно, и это не повлияет на сайт. Любые изменения вносятся только в то, как страница отображается в вашем отдельном браузере, вы не влияете на сам сайт. Как только вы закроете инструмент, все изменения будут потеряны.
Внесение изменений на страницу
Теперь вы знаете, что можете изменить все что угодно, не затрагивая реальный сайт, давайте немного повеселимся. Найдите на странице элемент, который вы хотите отредактировать. Вы можете изменить шрифт, цвет шрифта, фоновое изображение или что угодно. Для этого примера я собираюсь изменить цвет шрифта заголовка баннера.
- Щелкните правой кнопкой мыши на элементе, который вы хотите изменить, и выберите «Проверить».
- Выделите строку «title» или «H1», чтобы текст выделялся на верхней панели.
- Перейдите влево на две панели и найдите цвет шрифта.
- Измените значение на другое или выберите цветную точку, чтобы использовать селектор.
Ваше изменение будет отображаться динамически по мере его завершения. Вы можете изменить цвет, размер, шрифт, фон и все, что касается шрифта. Вы не можете сохранить работу, но ваши изменения останутся для этого сеанса.
Вы можете изменить все на странице, что идеально, если у вас есть идея и вы хотите быстро проверить ее, прежде чем запускать все свои приложения для разработки. Все, что вам нужно сделать, это вспомнить, какие изменения вы сделали и где вы не можете сохранить их здесь. Вам нужно будет сделать снимок экрана или записать изменения и повторить их в инструментах разработчика, чтобы они остались.
Редактирование веб-страницы в вашем браузере - отличный способ экспериментировать со своими страницами. Это также хороший способ немного узнать о веб-разработке без необходимости покупать дорогостоящие инструменты для разработчиков. Теперь вы знаете, как, пойти и поиграть!
