Як користуватися інструментом “Огляд елементів” у Chrome

Інструмент “Перевірка елементів” в Google Chrome – це потужна функція, яка дозволяє користувачам переглядати і змінювати HTML, CSS і JavaScript коди веб-сайтів безпосередньо з браузера. Він зазвичай використовується веб-розробниками та дизайнерами для налагодження, редагування стилів, тестування коду і навіть для більш детального ознайомлення з тим, як побудовані певні елементи веб-сайту. У цьому посібнику ви дізнаєтеся, як отримати доступ до інструменту “Перевірка елементів” у Chrome та ефективно ним користуватися.

Що таке інструмент “Перевірка елементів”?

Інструмент “Перевірка елементів” є частиною набору інструментів для розробників Chrome (DevTools). Він дозволяє вам

Переглядати та редагувати HTML і CSS в режимі реального часу.
Налагоджувати код JavaScript.
Імітувати різні розміри екрану для тестування адаптивного дизайну.
Перевіряти мережеві запити і бачити, як сайт завантажує ресурси.
Тестуйте зміни, не впливаючи на роботу сайту.

Як відкрити інструмент “Перевірка елементів” в Chrome

Існує кілька способів отримати доступ до інструменту “Перевірка елементів” в Chrome:

Спосіб 1: Клацніть правою кнопкою миші на веб-сторінці

Перейдіть на веб-сайт, який ви хочете перевірити.
Клацніть правою кнопкою миші на будь-якому елементі сторінки (наприклад, на зображенні, тексті або кнопці).
У контекстному меню, що з’явиться, виберіть “Перевірити”.

Відкриється вкладка “Елементи” в DevTools, на якій буде виділено HTML-код вибраного елемента.

Спосіб 2: Використання комбінацій клавіш

Ви можете швидко відкрити інструмент “Перевірити елемент” за допомогою комбінацій клавіш:

Windows/Linux: Ctrl Shift I
Mac: Командний рядок I

Спосіб 3: З меню Chrome

Натисніть на меню з трьома крапками (⋮) у верхньому правому куті Chrome.
Перейдіть до Додаткових інструментів > Інструменти розробника.

Панель DevTools відкриється внизу або збоку вікна браузера.

Огляд інтерфейсу DevTools

Після відкриття інструменту “Огляд елемента” ви побачите кілька вкладок у верхній частині панелі DevTools:

Елементи: Показує структуру HTML і стилі CSS сторінки.
Консоль: Корисна для запуску команд JavaScript і перегляду повідомлень про помилки.
Джерела: Дозволяє переглядати і налагоджувати файли JavaScript.
Мережа: Відображає всі мережеві запити, що корисно для аналізу часу завантаження сторінок і ресурсів.
Продуктивність: Допомагає проаналізувати продуктивність веб-сторінки.
Додаток: Показує такі дані, як файли cookie, локальне сховище та кеш.
Lighthouse: Надає звіти про аудит та продуктивність веб-сайту.

Найчастіше використовувана вкладка: Елементи

Вкладка “Елементи” є ядром інструменту “Перевірка елементів”, що дозволяє переглядати і змінювати HTML і CSS веб-сторінки.

Як користуватися інструментом “Огляд елементів” для HTML і CSS

1. Перевірка елементів HTML

Відкрийте вкладку “Елементи” (клацнувши правою кнопкою миші і вибравши “Оглянути” або за допомогою комбінацій клавіш).
Наведіть вказівник миші на різні елементи в дереві HTML, щоб побачити їх виділеними на веб-сторінці.
Клацніть будь-який HTML-елемент на панелі “Елементи”, щоб переглянути відповідні йому стилі CSS на панелі “Стилі” праворуч.

2. Редагування HTML у режимі реального часу

Двічі клацніть HTML-тег, атрибут або текст на вкладці “Елементи”, щоб відредагувати його.
Натисніть Enter, щоб застосувати зміни.
Зміни негайно відобразяться на сторінці, але вони є тимчасовими і будуть скинуті при оновленні сторінки.

Приклад: Змініть текст заголовка з <h1>Welcome to My Site</h1> to <h1>Hello World!</h1> , двічі клацнувши на тексті і відредагувавши його.

3. Редагування CSS в режимі реального часу

Виберіть елемент, який потрібно стилізувати, на вкладці “Елементи”.
На панелі “Стилі” праворуч ви можете редагувати наявні властивості CSS або додавати нові.
Щоб додати новий стиль, клацніть порожнє місце на панелі “Стилі” і введіть властивість CSS та її значення.

Приклад: Зміна кольору тла елемента:

background-color: #ff0000;

Зміни будуть застосовані негайно, але вони не збережуться на сайті назавжди.

4. Увімкнення та вимкнення стилів CSS

Кожна властивість CSS на панелі “Стилі” має позначку навпроти неї.
Зніміть прапорець, щоб тимчасово вимкнути властивість, або встановіть його знову, щоб увімкнути.

Це корисно для тестування того, як зміни в CSS можуть вплинути на дизайн без постійного редагування коду.

5. Копіювання та редагування HTML

Клацніть правою кнопкою миші на HTML-елементі на вкладці Елементи.
Виберіть “Копіювати” > “Копіювати елемент”, щоб скопіювати виділений HTML-код.
Потім ви можете вставити його в текстовий редактор або використовувати для розробки.

Використання вкладки Консоль

Вкладка “Консоль” – ще один потужний інструмент DevTools, який дозволяє запускати команди JavaScript безпосередньо на сторінці:

Перейдіть на вкладку Консоль.
Введіть команди або вирази JavaScript і натисніть Enter, щоб виконати їх.

Приклад: Змінити колір фону сторінки:

document.body.style.backgroundColor = ‘#00ff00’;

Це змінить колір фону сторінки на зелений.

Імітація мобільних пристроїв

Інструмент “Перевірити елемент” також дозволяє перевірити, як веб-сайт виглядає на різних розмірах екранів і пристроях:

Натисніть на іконку Перемикач пристроїв (маленька іконка телефону і планшета) у верхньому лівому куті панелі DevTools.
Виберіть пристрій у випадаючому меню (наприклад, iPhone, iPad, Galaxy).
Налаштуйте роздільну здатність і орієнтацію екрана, щоб побачити, як веб-сайт реагує на різні розміри екрана.

Ця функція надзвичайно корисна для тестування адаптивного дизайну.

Налагодження JavaScript

Вкладка Джерела використовується для налагодження JavaScript:

Відкрийте вкладку Джерела в DevTools.
Ви можете встановити точки зупинки, натиснувши на номери рядків коду JavaScript.
Це дозволяє призупинити виконання коду і перевірити змінні, функції та стек викликів.

Аналіз мережі за допомогою вкладки Network

Вкладка “Мережа” показує всі мережеві запити, які відбуваються під час завантаження сторінки, включаючи зображення, скрипти і таблиці стилів:

Відкрийте вкладку Мережа перед оновленням сторінки.
Оновіть сторінку, щоб побачити всі мережеві запити.
Ви можете відфільтрувати запити за типом (наприклад, XHR, JS, CSS) і подивитися, скільки часу завантажується кожен ресурс.

Це корисно для оптимізації швидкості завантаження сторінки.

Підсумок

Інструмент “Перевірка елементів” в Google Chrome – це універсальна і важлива функція для веб-розробників, дизайнерів і навіть допитливих користувачів, які хочуть зрозуміти, як створюються веб-сайти. Навчившись перевіряти і змінювати HTML, CSS і JavaScript, ви зможете налагоджувати проблеми, тестувати нові стилі і гарантувати, що ваш веб-сайт буде чудово виглядати на різних пристроях. Завдяки різноманітним інструментам і вкладкам, доступним у Chrome DevTools, ви зможете глибше зрозуміти, як функціонують веб-сайти, та оптимізувати їх для кращої продуктивності.