Как редактировать веб-страницы в Safari с помощью Inspect Element

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

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

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

Inspect Element — это инструмент разработчика. Он доступен в Safari, а также в других веб-браузерах, таких как Chrome, Firefox и Edge. С помощью Inspect Element вы можете заглянуть за кулисы веб-сайта, чтобы раскрыть его интерфейсный код, такой как HTML и CSS. Однако это не дает вам видимости серверной части, такой как ее базы данных.

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

Почему вы должны использовать Inspect Element?

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

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

Сейчас мы сосредоточимся на редактировании основ веб-страницы с помощью Inspect Element.

Как получить доступ к Inspect Element в Safari

Вы можете открыть Inspect Element в Safari с помощью меню разработчика:

1. Откройте Сафари.
2. Нажмите Сафари в верхней строке меню.
3. В раскрывающемся меню выберите Настройки.
4. Выберите Передовой вариант.
5. Установите флажок, который говорит Показать меню «Разработка» в строке меню.

После выбора этой опции вы можете щелкните правой кнопкой мыши на веб-странице и выберите Проверить элемент. Кроме того, вы можете выбрать Развивать в строке меню, а затем Показать веб-инспектор.

Как найти веб-элементы в Inspect Element

Чтобы начать редактирование элемента, щелкните правой кнопкой мыши что вы хотите отредактировать и нажмите Проверить элемент. Откроется окно разработчика с выделенным соответствующим разделом. Вы можете обнаружить, что конкретный элемент, который вы хотите добавить в элемент (скажем, изображение или текст), скрыт; чтобы найти его, используйте стрелы слева, чтобы развернуть вложенные разделы.

Чтобы сузить выбор, нажмите кнопку значок цели на панели инструментов «Проверить элемент». Теперь, когда вы перемещаетесь по коду, он выделяет этот раздел на веб-сайте. Или вы можете использовать свой курсор, чтобы точно определить раздел на сайте. Это удобно, когда вы хотите отточить что-то конкретное в многолюдной области веб-страницы.

Как редактировать текст веб-сайта с помощью Inspect Element

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

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

Как редактировать изображения веб-сайта с помощью Inspect Element

В то время как изображения отображаются визуально для вас на внешнем интерфейсе, в коде веб-сайта они отображаются как ссылки. Ты сможешь щелкните правой кнопкой мыши и изображение и выбрать Проверить элемент чтобы перейти туда, где это изображение находится в коде. Изображения веб-сайтов обычно имеют расширения файлов JPG, GIF или PNG, но не всегда.

Двойной клик эти строки изображений, и вы можете редактировать их или просто сохранить их в своей системе, если хотите. Если вы хотите заменить изображение, переключите его на URL-адрес замещающего изображения. Или вы можете полностью удалить строку кода, чтобы убрать изображение из поля зрения.

Копаться в веб-сайтах с помощью Safari

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

Как изменить пользовательский агент вашего браузера и веб-сайты с трюками

Читать дальше

Об авторе