Розробники та дизайнери інтерфейсу користувача використовують функцію 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 на a праву панель.
Як відкрити елемент Inspect у Chrome, не клацаючи правою кнопкою миші?
Існує кілька зручних ярликів для відкриття інструмента «Перевірити елемент» у Google Chrome для Windows. Нижче наведено ці гарячі клавіші:
- Ctrl + Shift + C
- Функціональна клавіша F12
Наведені вище гарячі клавіші також працюють у браузері Mozilla для Windows.
Інструмент Mozilla Inspector
У браузері 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.
- Натисніть Уподобання з контекстного меню, що відкриється.
- На Екран налаштувань, виберіть Просунутий.
- Поставте галочку Показати Розвиток меню в нижній частині Розширені налаштування екран.
Ви успішно ввімкнули інструменти розробника в Safari для Mac. Тепер виконайте такі кроки, щоб використовувати Inspect Element:
- На будь-якому елементі веб-сайту, як-от тексті чи зображенні, клацніть правою кнопкою миші.
- З'явиться контекстне меню. Унизу ви побачите Перевірити елемент.
- Натисніть на це, щоб відкрити розділ налагодження під веб-сайтом, де показано HTML і CSS коди.
Які ключі для перевірки елемента?
Можливо, ви шукаєте ярлики для Inspect Element на Mac. Ви можете використовувати наступне:
- Команда + Shift + C
- Натисніть КОНТРОЛЬ і виберіть будь-який елемент.
- Натисніть трекпад двома пальцями
Як перевірити елементи на 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 зараз!