Как использовать Inspect Element для временного редактирования веб-страницы

14 апреля 2021 г.

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

Что такое Inspect Element и почему это важно?

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

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

Что вы можете сделать с Inspect Element?

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

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

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

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

• Агенты поддержки: Агенты поддержки могут использовать Inspect Element, чтобы показать быстрый пример изменения и продемонстрировать разработчикам, что им нужно исправить.

Как использовать Inspect Element в Chrome

Выполните следующие действия, чтобы использовать инструмент «Проверить элемент» в Chrome:

1. Подключитесь к Интернету

Откройте веб-сайт, который вы хотите просмотреть, в браузере Chrome.

2. Доступ к элементу проверки

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

• Щелкните правой кнопкой мыши в любом месте страницы и выберите «Проверить» в нижней части появившегося меню.

• Нажмите на три вертикальные точки на боковой панели, затем выберите «Дополнительные инструменты» -> «Инструменты разработчика» в раскрывающемся меню.

• Используйте сочетания клавиш: «F12» на ПК, чтобы открыть Inspect Elements, или «CMD+Option+I» на Mac.

Окно элемента появляется в нижней части вашего браузера и отображает вкладку «Элементы», которая представляет собой инструмент, который вы ищете.

3. Выберите вид

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

4. Исследуйте вкладки

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

• Вкладка «Элементы»: «Проверить элемент» — это первый инструмент, который открывается при запуске инструментов разработчика в браузере. Вы можете нажать «Элементы», чтобы вернуться к нему после изучения другой вкладки.

• Вкладка «Исследование»: вы можете увидеть все JavaScript, CSS или HTML, которые создали веб-сайт.

• Вкладка «Поиск». Вкладка «Поиск» помогает вам искать определенные элементы HTML или контент в каждом файле на веб-странице. Чтобы получить к нему доступ, нажмите на три вертикальные точки, затем выберите «Поиск во всех файлах», чтобы открыть его.

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

5. Измените CSS

Вы можете изменить CSS и изменить размеры, границы, шрифты или цвета, отредактировав их на панели CSS.

6. Измените элементы

Вот как вы можете изменять элементы:

• Добавьте элемент. Щелкните правой кнопкой мыши в любом месте панели и выберите «Добавить атрибут».

• Скрыть элемент. Нажмите на элемент, который хотите скрыть, и выберите «Скрыть элемент».

• Удалить элемент. Нажмите на элемент, который хотите удалить. Выберите «Проверить», затем «Удалить элемент».

7. Внесите изменения в HTML

Перейдите на вкладку «Элементы». Вы должны увидеть HTML-код веб-страницы. Вы можете внести следующие изменения:

Изменить текст на веб-странице

В верхнем углу панели разработчика щелкните значок мыши поверх квадрата. Затем нажмите на текст, который вы хотите изменить на странице. Теперь вы можете увидеть выделенную синим цветом строку текста на панели инструментов разработчика. Дважды щелкните по выделенному синим тексту, и он станет редактируемым. Вы можете ввести то, что хотите, в это текстовое поле и нажать Enter. Выбранный текст изменился на веб-странице. Если вы обновите страницу, ваша модификация исчезнет.

Изменить шрифт

Если вы уже один раз щелкнули значок мыши над квадратом, чтобы выполнить предыдущую модификацию, теперь вы можете получить доступ к ярлыку. Нажмите на слова, которые вы хотите изменить на веб-странице, затем выберите «Проверить» в контекстном меню, и вы увидите выбранное предложение, выделенное на панели инструментов разработчика. Вы можете увидеть подпанель справа от этого предложения.

Каждая дополнительная вкладка — стиль, вычисление, прослушиватель событий — может изменить внешний вид предложения на странице. Стили позволяют изменить выравнивание в функции text-align. Дважды щелкните слово, описывающее выравнивание, и введите нужное. Например, если он расположен по центру, вы можете написать «выравнивание по левому краю».

Изменить цвет

Щелкните значок мыши в Inspect Element, чтобы открыть вкладку «Style» и выбрать цветовую линию. За символом # следует последовательность букв и цифр. Дважды щелкните по нему и введите другой код, затем нажмите Enter.

Например, оранжевый — это #ff4a00, а синий — #4199ad.

Изменить кнопку

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

• :active: как выглядит кнопка, когда на нее нажимает посетитель.

• :focus: когда посетитель выбирает его

• :visited: когда посетитель щелкнул по нему или

• :hover state: когда посетитель наводит курсор на кнопку.

Например, выбрав «: focus:», а затем изменив значение цвета фона, вы сможете увидеть изменение цвета кнопки при нажатии на нее.

Изменить изображение

Чтобы изменить изображение на веб-странице, вы можете сначала скопировать ссылку на нужное изображение. Затем откройте Inspect Element и выберите исходное изображение, которое нужно изменить. На панели «Стили» дважды щелкните ссылку URL-адрес фона и вставьте ссылку нового изображения.

Процесс такой же, как и с GIF или видео. Вам нужно только добавить ссылку.