Разработчики и дизайнеры пользовательского интерфейса используют функцию Inspect Element для изменения веб-сайтов в Интернете без изменения исходного кода. Но как проверить элементы, не пройдя курс веб-разработки?
Inspect Element — это удобный инструмент разработчика, который входит в стандартную комплектацию популярных веб-браузеров. Вам просто нужно знать, как развернуть инструмент в несколько кликов при просмотре веб-сайтов.
Вы можете делать множество фокусов, таких как изменение макета веб-сайта, создание скриншотов без текста, изменение шрифтов, изменение чисел и многое другое.
Ниже вы найдете краткое пошаговое руководство, чтобы научиться легко проверять элементы.
Что такое элемент проверки?
Inspect Element — это инструмент веб-разработки, доступный в большинстве веб-браузеров. Вы можете использовать его для редактирования внешнего исходного кода любого веб-сайта, который вы посещаете.
Вносимые вами изменения происходят в песочнице внутри вашего веб-браузера. Таким образом, вы не вносите никаких изменений в реальный веб-сайт. Кроме того, поверхностные изменения, которые вы вносите, исчезают при обновлении страницы.
Вот несколько творческих способов его использования:
- Вам нужно сделать скриншот с веб-сайта, а тексты на изображении вас беспокоят. Используйте инструмент Inspect Element, чтобы удалить эти тексты.
- Вы хотите разыграть своих друзей, показав им свое имя в New York Times или Washington Post. Inspect Element — лучший способ сделать это.
- Тестируйте коды отладки на веб-сайтах, применяя их в режиме реального времени с помощью инструмента Inspect Element. Если это работает, вы можете изменить исходный код бэкэнда.
- Как специалист по цифровому маркетингу, вы можете выявить ключевые слова конкурентов, SEO-заголовки, метатеги и т. д. с помощью этого мощного инструмента веб-разработки.
Как проверять элементы в Windows
Использовать инструмент Inspect Element в Windows до смешного просто. Ниже приведено пошаговое руководство по проверке элементов с помощью различных веб-браузеров в Windows:
Инструмент проверки Google Chrome
- Когда используешь Гугл Хром, щелкните правой кнопкой мыши в любом месте на веб-сайте.
- Появится контекстное меню правой кнопки мыши.
- Внизу вы увидите Осмотреть.
- Нажмите Осмотреть для просмотра кодов HTML и CSS на правая боковая панель.
Как открыть элемент проверки в Chrome без щелчка правой кнопкой мыши?
Есть несколько удобных ярлыков для открытия инструмента Inspect Element в Google Chrome для Windows. Эти горячие клавиши, как показано ниже:
- Ctrl + Сдвиг + С
- Функциональная клавиша F12
Вышеупомянутые горячие клавиши также работают в браузере Mozilla для Windows.
Инструмент инспектора Mozilla
В браузере Mozilla процесс такой же, как в Google Chrome. Однако Инспектор окно появится внизу браузера, а не справа, как в Google Chrome.
Инструмент проверки Microsoft Edge
Удивительно, но Inspect Element в Microsoft Edge работает аналогично браузеру Google Chrome. Инструмент проверки доступен при щелчке правой кнопкой мыши. Кроме того, коды HTML и CSS отображаются справа, как в Google Chrome.
Как проверять элементы на Mac
Используете ли вы Google Chrome, Mozilla Firefox или Microsoft Edge на компьютерах Apple Mac? Если да, то вы можете развернуть инструмент Inspect Element, выполнив шаги, указанные выше в разделе Windows.
Но если вы используете веб-браузер macOS по умолчанию, Safari, то использование инструмента Inspect Element — сложная игра. По умолчанию Safari не отображает Inspect Element на Mac. Вот что вам нужно сделать:
Как открыть Inspect Element на Mac
Во-первых, вам нужно активировать инструменты разработчика в Safari на Mac. Вот как:
- Бегать в браузер сафари.
- Посетите веб-сайт, на котором вы хотите проверить веб-элементы.
- Выбирать Сафари из верхней строки меню браузера Safari.
- Нажмите Настройки из открывшегося контекстного меню.
- На Экран настроек, выбирать Передовой.
- Отметьте Показать Разработать меню в самом низу Расширенные настройки экран.
Вы успешно включили инструменты разработчика в Safari для Mac. Теперь выполните следующие действия, чтобы использовать Inspect Element:
- На любом элементе веб-сайта, таком как текст или изображение, щелкните правой кнопкой мыши.
- Появится контекстное меню. Внизу вы увидите Проверить элемент.
- Нажмите на это, чтобы открыть раздел отладки под веб-сайтом, показывающим HTML и CSS коды.
Каковы ключи для проверки элемента?
Возможно, вы ищете ярлыки для Inspect Element на Mac. Вы можете использовать следующее:
- Команда + Сдвиг + С
- нажмите Контроль клавишу, а затем выберите любой элемент.
- Щелкните трекпад двумя пальцами
Как проверять элементы на Chromebook
Chromebook использует Google Chrome в качестве браузера по умолчанию. Следовательно, после открытия любого веб-сайта просто щелкните правой кнопкой мыши, чтобы найти параметр «Проверить элемент» в следующем контекстном меню.
Если вы используете Chromebook на работе или в учебном заведении, у вас может возникнуть такой вопрос:
Почему я не могу проверить на школьном Chromebook?
Большинство школьных и бизнес-администраторов отключают расширенные функции на Chromebook, которые они предоставляют вам для работы или учебы. Поскольку инструменты разработчика являются расширенными функциями, есть вероятность, что ваш школьный или рабочий Chromebook не будет отображать инструмент Inspect Element.
Как проверять элементы на iPad/iPhone
К сожалению, вы не можете использовать инструмент Inspect Element на iPhone или iPad без Mac.
В iOS и iPadOS есть веб-инспектор для приложения Safari. Однако это работает только в том случае, если вы подключаете мобильное устройство к Mac, на котором вы уже активировали инструменты разработчика для Safari. Ниже приведены шаги, которые вы можете попробовать:
- Откройте iPad/iPhone Настройки приложение.
- Нажмите Сафари на левой панели навигации.
- Затем прокрутите вниз с правой стороны, чтобы найти и выбрать Передовой.
- Активируйте переключатель для Веб-инспектор.
- Теперь подключите мобильное устройство к Mac, используя USB.
- Авторизуйте iPhone/iPad на Mac.
- Откройте любой веб-сайт на мобильном устройстве в Safari.
- Теперь запустите Safari на Mac и выберите Развивать в верхней строке меню.
- В открывшемся контекстном меню найдите имя своего мобильного устройства.
- Наведите курсор на мобильное устройство, чтобы просмотреть все открытые веб-сайты.
- Теперь выберите любой веб-сайт, чтобы просмотреть исходный код HTML и CSS в браузере Safari на Mac.
Заключение
Вы изучили все возможные способы использования инструмента Inspect Element для редактирования временных веб-страниц. Вы также узнали, как проверять элементы для различных устройств, таких как Mac, Windows, Chromebook, iPad и iPhone.
В следующий раз, когда вам понадобится изменить веб-страницу для развлечения или для профессиональных нужд, попробуйте эти методы. Вам определенно понравятся эти простые шаги по сравнению с другими сложными методами, описанными в другом месте.
Не забудьте оставить комментарии ниже, помогли ли вам вышеперечисленные шаги, любой метод, который вы считаете сложным, или какие-либо секретные советы об инструменте Inspect Element.
Нужна веб-страница в качестве печатного справочника? Узнайте, как быстро сохранить веб-страницу в формате PDF сейчас!