Як перевіряти елементи на Mac, Windows, iPhone та iPad

Розробники та дизайнери інтерфейсу користувача використовують функцію 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

Як перевірити елементи в браузері Windows Chrome

• Під час використання Google Chrome клацніть правою кнопкою миші будь-де на веб-сайті.
• З’явиться контекстне меню, яке клацне правою кнопкою миші.
• Унизу ви побачите Перевірити .
• Натисніть Перевірити , щоб переглянути коди HTML і CSS на правій панелі .

Як відкрити елемент Inspect у Chrome, не клацаючи правою кнопкою миші?

Існує кілька зручних ярликів для відкриття інструмента «Перевірити елемент» у Google Chrome для Windows. Нижче наведено ці гарячі клавіші:

• Ctrl + Shift + C
• Функціональна клавіша F12

Наведені вище гарячі клавіші також працюють у браузері Mozilla для Windows.

Інструмент Mozilla Inspector

Як перевірити елементи в браузері Windows Mozilla

У браузері Mozilla процес такий самий, як і в Google Chrome. Однак вікно інспектора відображатиметься в нижній частині браузера, а не праворуч, як у Google Chrome.

Інструмент перевірки Microsoft Edge

Як перевірити елементи в браузері Windows 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.
• Натисніть «Параметри» в контекстному меню, що відкриється.
• На екрані «Параметри» виберіть «Додатково» .
• Позначте меню «Показати розробку» внизу екрана додаткових налаштувань .

Ви успішно ввімкнули інструменти розробника в Safari для Mac. Тепер виконайте такі кроки, щоб використовувати Inspect Element:

• Будь-який елемент веб-сайту, наприклад текст або зображення, клацніть правою кнопкою миші .
• З'явиться контекстне меню. Унизу ви побачите Перевірити елемент .
• Клацніть це, щоб відкрити розділ налагодження під веб-сайтом із кодами HTML і CSS .

Які ключі для перевірки елемента?

Можливо, ви шукаєте ярлики для Inspect Element на Mac. Ви можете використовувати наступне:

• Command + Shift + C
• Натисніть клавішу Control і виберіть будь-який елемент.
• Натисніть трекпад двома пальцями

Як перевірити елементи на Chromebook

Chromebook використовує Google Chrome як браузер за умовчанням. Отже, після відкриття будь-якого веб-сайту просто клацніть правою кнопкою миші, щоб знайти опцію «Перевірити елемент» у контекстному меню, що наведеться далі.

Якщо ви користуєтеся Chromebook на роботі чи в школі, можливо, ви задаєте таке запитання:

Чому я не можу перевірити на своєму шкільному Chromebook?

Більшість адміністраторів шкіл і підприємств вимикають розширені функції на Chromebook, який вони надають вам для роботи чи навчання. Оскільки інструменти розробника є розширеними функціями, швидше за все, на вашому Chromebook у школі чи на роботі не відображатиметься інструмент Inspect Element.

Як перевірити елементи на iPad/iPhone

На жаль, ви не можете використовувати інструмент Inspect Element на iPhone або iPad без Mac.

iOS і iPadOS мають веб-інспектор для програми Safari. Однак це працює, лише якщо ви підключите мобільний пристрій до Mac, на якому ви вже активували інструменти розробника для Safari. Нижче наведено кроки, які ви можете спробувати:

• Відкрийте програму налаштувань iPad/iPhone .
• Натисніть Safari на лівій навігаційній панелі.

Відкриття налаштувань Safari на iPad або iPhone

• Потім прокрутіть униз праворуч, щоб знайти та вибрати Додатково .

Активація Web Inspector на iPad і iPhone

• Увімкніть перемикач для Web Inspector .
• Тепер підключіть мобільний пристрій до Mac за допомогою USB .
• Авторизуйте iPhone/iPad на Mac.
• Відкрийте будь-який веб-сайт на мобільному пристрої в Safari.
• Тепер запустіть Safari на Mac і виберіть «Розробити» у верхній панелі меню.
• У контекстному меню, що відкриється, знайдіть назву свого мобільного пристрою.
• Наведіть курсор на мобільний пристрій, щоб переглянути всі відкриті веб-сайти.
• Тепер виберіть будь-який веб-сайт, щоб переглянути вихідний код HTML і CSS у браузері Safari Mac.

Висновок

Ви дослідили всі можливі способи використання інструмента «Перевірити елемент» для тимчасового редагування веб-сторінки. Ви також дізналися, як перевіряти елементи для різних пристроїв, таких як Mac, Windows, Chromebook, iPad і iPhone.

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

Не забудьте залишити коментарі нижче, якщо вищевказані кроки допомогли вам, будь-який метод, який ви вважаєте складним, або будь-які секретні поради щодо інструмента Inspect Element.

Потрібна веб-сторінка як друкована довідка? Дізнайтеся, як швидко зберегти веб-сторінку у форматі PDF зараз!