Пошук уроків, статей та іншого контенту
Навчитеся відкривати Chrome DevTools, переглядати HTML і CSS та знаходити помилки на сторінці.
Chrome DevTools — це набір інструментів у браузері Google Chrome для перевірки та налагодження вебсторінок.
За допомогою DevTools можна:
переглядати HTML-код сторінки;
знаходити потрібні HTML-елементи;
переглядати та тимчасово змінювати CSS;
перевіряти повідомлення про помилки;
тестувати зміни без редагування файлів проєкту.
Зміни, зроблені в DevTools, діють лише в поточній вкладці. Після перезавантаження сторінки вони зникнуть.
Є кілька способів відкрити Chrome DevTools:
Клацнути правою кнопкою миші на сторінці та вибрати Перевірити або Inspect.
Натиснути:
Windows або Linux: F12 або Ctrl + Shift + I;
macOS: Cmd + Option + I.
Після відкриття DevTools його панель зазвичай з’являється праворуч або внизу вікна браузера.
Положення панелі можна змінити за допомогою меню з трьома крапками у верхньому правому куті DevTools.
Вкладка Elements призначена для перегляду HTML-структури сторінки та пов’язаних стилів.
Розглянемо приклад сторінки:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Картка користувача</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.card {
width: 300px;
padding: 20px;
margin: 40px auto;
background-color: white;
border: 1px solid #cccccc;
border-radius: 8px;
}
.card-title {
color: #2457a6;
}
</style>
</head>
<body>
<article class="card">
<h1 class="card-title">Олена</h1>
<p>Розробниця інтерфейсів</p>
</article>
</body>
</html>Збережіть код у файл index.html і відкрийте його в Chrome. Потім відкрийте DevTools.
У лівій частині вкладки Elements ви побачите HTML-структуру:
<body>
<article class="card">
<h1 class="card-title">Олена</h1>
<p>Розробниця інтерфейсів</p>
</article>
</body>Елементи можна розгортати та згортати за допомогою маленьких стрілок біля тегів.
Щоб швидко знайти елемент:
Відкрийте вкладку Elements.
Натисніть кнопку вибору елемента у верхній лівій частині DevTools.
Наведіть курсор на елемент сторінки.
Клацніть по ньому.
Також можна натиснути Ctrl + Shift + C у Windows або Linux, а на macOS — Cmd + Shift + C.
Після вибору елемента Chrome підсвітить відповідний HTML-код.
Це корисно, коли на сторінці багато елементів і потрібно зрозуміти, який саме тег відповідає за певну частину інтерфейсу.
Коли HTML-елемент вибрано, у правій частині вкладки Elements відображаються його стилі.
Для елемента:
<h1 class="card-title">Олена</h1>Chrome покаже правило:
.card-title {
color: #2457a6;
}У цьому блоці можна:
переглянути властивості CSS;
побачити, з якого файлу або рядка походить стиль;
тимчасово змінити значення;
вимкнути окрему властивість;
додати нову властивість.
Спробуйте змінити колір заголовка:
Виберіть елемент <h1 class="card-title">.
У правій частині знайдіть властивість color.
Клацніть по значенню #2457a6.
Введіть, наприклад, crimson.
Натисніть Enter.
Заголовок одразу змінить колір на сторінці.
Ця зміна не потрапляє у файл index.html. Вона існує лише в поточному екземплярі сторінки.
Біля кожної властивості CSS є прапорець. Якщо зняти його, властивість буде тимчасово вимкнено.
Наприклад, вимкніть:
border-radius: 8px;Кути картки стануть прямими. Так можна швидко перевірити, яка саме властивість впливає на вигляд елемента.
У блоці стилів можна клацнути на порожньому рядку та додати нову властивість:
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);Після натискання Enter картка отримає тінь.
Знову ж таки, це лише перевірка в браузері. Щоб зберегти зміну в проєкті, її потрібно додати до справжнього CSS-файлу або до блоку <style>.
Вкладка Computed показує фактичні значення CSS-властивостей вибраного елемента.
Наприклад, правило може містити:
.card {
width: 300px;
}А у вкладці Computed можна побачити підсумкову ширину елемента з урахуванням усіх застосованих стилів.
Ця вкладка допомагає, коли:
властивість задана в кількох CSS-правилах;
один стиль перекриває інший;
потрібно дізнатися фактичний розмір або колір елемента.
У блоці Box Model можна переглянути:
content — вміст;
padding — внутрішні відступи;
border — межу;
margin — зовнішні відступи.
Наприклад, для картки з такими стилями:
.card {
width: 300px;
padding: 20px;
border: 1px solid #cccccc;
margin: 40px auto;
}DevTools покаже ці частини окремо. Це допомагає зрозуміти, чому елемент займає більше місця, ніж здається.
У вкладці Elements можна тимчасово змінити HTML.
Клацніть правою кнопкою миші на елементі та виберіть Edit as HTML. Після цього можна змінити його розмітку.
Наприклад, замініть:
<p>Розробниця інтерфейсів</p>на:
<p>Frontend-розробниця</p>Після підтвердження текст на сторінці зміниться.
Так само можна змінити атрибут:
<h1 class="card-title">Олена</h1>на:
<h1 class="card-title highlighted">Олена</h1>Але новий клас не матиме видимого ефекту, якщо для нього немає CSS-правила.
Вкладка Console показує повідомлення та помилки, які виникли під час роботи сторінки.
Щоб перевірити помилку, додайте до HTML такий код:
<script>
const userName = user.name;
console.log(userName);
</script>У консолі з’явиться помилка, оскільки змінна user не визначена.
Типове повідомлення може виглядати приблизно так:
Uncaught ReferenceError: user is not definedЦе означає:
ReferenceError — помилка звернення до змінної або іншого імені;
user is not defined — змінна user не була оголошена.
У консолі можна побачити:
помилки — зазвичай позначені червоним кольором;
попередження — зазвичай жовтим;
звичайні повідомлення;
результати виконання JavaScript-коду.
Наприклад:
console.log("Сторінка завантажена");Виведе повідомлення в Console.
Для HTML і CSS найчастіше корисно перевіряти Console, якщо:
частина сторінки не працює;
скрипт не виконується;
браузер показує помилку;
елементи сторінки поводяться неочікувано.
Якщо CSS не працює, перевірте такі речі:
Чи вибрано правильний HTML-елемент.
Чи правильно написано назву класу.
Чи активне CSS-правило у правій частині DevTools.
Чи не перекреслена властивість.
Чи не перевизначає її інше правило.
Чи немає синтаксичної помилки.
Наприклад, це правило не змінить колір заголовка:
.card-titel {
color: red;
}У HTML клас називається card-title, а в CSS написано card-titel. Через цю помилку селектор не знаходить елемент.
Правильний варіант:
.card-title {
color: red;
}Перевірка через DevTools допомагає швидко побачити, чи застосувалося правило до елемента.
Створіть файл index.html із прикладом картки.
Відкрийте файл у Chrome.
Відкрийте DevTools.
У вкладці Elements виберіть заголовок.
Змініть його колір на green.
Вимкніть властивість border-radius.
Додайте для картки властивість:
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);Змініть текст абзацу через Edit as HTML.
Відкрийте вкладку Console і виконайте:
document.querySelector(".card-title").textContent = "Марія";Після виконання команда змінить текст заголовка на сторінці.
Зміни в Elements і Styles є тимчасовими. Перезавантаження сторінки повертає початковий стан.
Якщо зміна потрібна в проєкті, внесіть її у відповідний HTML- або CSS-файл.
На сторінці можуть бути кілька однакових тегів, наприклад кілька <p>. Використовуйте інструмент вибору елемента та перевіряйте, який саме тег підсвічено.
Перекреслена CSS-властивість не застосовується. Зазвичай її перекриває інше правило з вищим пріоритетом або пізнішим порядком оголошення.
Якщо в HTML написано:
<div class="message"></div>то CSS-селектор класу має починатися з крапки:
.message {
color: blue;
}Якщо JavaScript спричинив помилку, причину часто можна побачити саме у вкладці Console. Червоне повідомлення містить назву помилки та часто вказує рядок, у якому вона виникла.
Chrome DevTools допомагає досліджувати вебсторінку безпосередньо в браузері.
Основні інструменти:
Elements — перегляд і тимчасове редагування HTML;
Styles — перевірка та зміна CSS;
Computed — перегляд підсумкових стилів і блокової моделі;
Console — пошук помилок і повідомлень.
Пам’ятайте: зміни в DevTools тимчасові. Вони потрібні для перевірки, пошуку помилок і експериментів перед внесенням змін у файли проєкту.