Chrome DevTools для налагодження CSS

Вкладка Elements

Вкладка Elements складається з двох основних частин:

1. дерево HTML-елементів;

2. панель властивостей вибраного елемента.

Наприклад, розглянемо таку сторінку:

Відкрийте файл у браузері та запустіть DevTools.

Вибір елемента на сторінці

Щоб швидко знайти елемент:

1. відкрийте DevTools;

2. натисніть кнопку вибору елемента — піктограму курсора у верхній частині панелі;

3. наведіть курсор на елемент сторінки;

4. клацніть по ньому.

Також можна натиснути Ctrl + Shift + C у Windows або Linux чи Cmd + Shift + C у macOS, а потім вибрати елемент на сторінці.

Після вибору елемент буде підсвічений у дереві HTML та на самій сторінці.

Пошук елемента в DOM

У верхній частині вкладки Elements можна натиснути Ctrl + F і виконати пошук:

• за назвою тегу;

• за класом;

• за ідентифікатором;

• за текстом елемента.

Наприклад, пошук за .card__button знайде кнопку профілю.

Панель Styles

Панель Styles показує CSS-правила, що стосуються вибраного елемента.

Для кнопки з прикладу можна побачити:

У цій панелі можна:

• вмикати та вимикати окремі властивості;

• редагувати значення;

• додавати нові властивості;

• додавати нові селектори;

• змінювати кольори через вбудований палітровий редактор;

• переходити до файлу та номера рядка, де оголошено правило.

Вимкнення CSS-властивості

Ліворуч від кожної властивості є прапорець. Якщо його вимкнути, браузер перестане враховувати цю властивість.

Наприклад, якщо вимкнути:

кнопка стане меншою. Це допомагає швидко перевірити, чи впливає конкретна властивість на проблему.

Редагування значення

Клацніть по значенню властивості та введіть нове:

Зміна одразу відобразиться на сторінці. Це зручно для підбору кольорів, відступів, ширини та інших параметрів.

Додавання нового правила

У панелі Styles можна натиснути кнопку +. Chrome створить новий CSS-селектор для вибраного елемента.

Наприклад:

Так можна перевірити гіпотезу, не змінюючи файл проєкту.

Виявлення перезаписаних властивостей

Якщо CSS-властивість перекреслена, це означає, що браузер її бачить, але не використовує.

Наприклад:

Для кнопки правило .card__button має вищу специфічність, тому background: gray буде перекреслено.

У DevTools це виглядатиме приблизно так:

Перекреслена властивість може бути наслідком:

• нижчої специфічності селектора;

• пізнішого правила з такою самою специфічністю;

• успадкування;

• використання !important в іншому правилі;

• неактивного стану елемента або медіазапиту.

Перевірка порядку правил

Коли кілька правил мають однакову специфічність, перемагає правило, яке оголошене пізніше.

Фактичним кольором буде darkgreen, тому що друге правило розташоване нижче.

У DevTools правила відображаються в порядку, який допомагає побачити, чому одне з них перемогло інше.

Каскад і специфічність у DevTools

Каскад визначає, які стилі зрештою отримає елемент. На результат впливають:

1. важливість правила;

2. специфічність селектора;

3. порядок оголошення.

Порівняймо селектори:

Якщо елемент має вигляд:

найвищу специфічність має селектор з ідентифікатором, тому текст стане фіолетовим.

У DevTools можна перевірити кожне правило й побачити, які властивості були перезаписані. Це практичніше, ніж намагатися визначити причину лише за вихідним CSS-файлом.

Як знаходити джерело правила

Праворуч від селектора DevTools зазвичай показує назву CSS-файлу та номер рядка. Клацання по цьому посиланню відкриває відповідний файл у вкладці Sources.

Це дозволяє швидко перейти від проблемного елемента до коду, який потрібно виправити.

Вкладка Computed

Вкладка Computed показує фінальні обчислені значення CSS-властивостей.

На відміну від Styles, вона не показує весь набір правил каскаду. Вона відповідає на запитання:

Яке значення фактично використовує браузер?

Наприклад, для картки можна перевірити:

• фактичну ширину та висоту;

• display;

• position;

• margin;

• padding;

• font-size;

• line-height;

• color;

• background-color;

• значення flex або grid.

Пошук у верхній частині вкладки Computed допомагає швидко знайти властивість. Якщо розгорнути властивість, Chrome покаже CSS-правило, з якого взялося її значення.

Різниця між Styles і Computed

Styles відповідає на запитання:

Які правила претендують на застосування до цього елемента?

Computed відповідає на запитання:

Яке значення зрештою отримав елемент?

Наприклад, у CSS може бути:

У Styles ви побачите обидві властивості. У Computed буде показано фактичну ширину, яка залежить від ширини батьківського елемента та доступного простору.

Перевірка моделі блока

У панелі Computed є схема Box Model. Вона показує чотири рівні:

1. content — область вмісту;

2. padding — внутрішні відступи;

3. border — межі;

4. margin — зовнішні відступи.

Для картки з прикладу:

розмір картки включає:

• ширину та висоту вмісту;

• padding;

• border.

Оскільки в коді використано:

задана ширина містить padding і border.

Без border-box ширина елемента складалася б із ширини вмісту, внутрішніх відступів і меж. Це часто стає причиною несподіваного переповнення.

Налагодження відступів

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

1. виберіть його в Elements;

2. подивіться на підсвічування моделі блока;

3. перевірте margin;

4. перевірте padding батьківського елемента;

5. перевірте ширину, висоту та box-sizing.

DevTools підсвічує різні частини моделі блока різними кольорами. Наведіть курсор на значення в схемі, щоб побачити, яка область сторінки відповідає конкретному відступу.

Підсвічування елемента на сторінці

Коли елемент вибраний у DOM, наведіть курсор на його HTML-вузол. Chrome підсвітить:

• межі елемента;

• внутрішній і зовнішній відступи;

• розміри;

• іноді тип розкладки — Flexbox або Grid.

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

Наприклад, якщо кнопка має правильні margin, але все одно зміщена, перевірте:

• display батьківського елемента;

• justify-content;

• align-items;

• gap;

• position;

• ширину контейнера.

Перевірка Flexbox і Grid

Якщо елемент є flex- або grid-контейнером, у DevTools біля відповідного правила з’являється спеціальний індикатор. Натиснувши його, можна ввімкнути візуалізацію розкладки.

Для Flexbox корисно перевіряти:

• напрямок flex-direction;

• вирівнювання justify-content;

• вирівнювання align-items;

• відстань gap;

• перенесення через flex-wrap;

• розміри дочірніх елементів.

Для Grid можна досліджувати:

• кількість колонок і рядків;

• розміри треків;

• проміжки gap;

• області Grid;

• вирівнювання елементів.

Спочатку знайдіть контейнер, а не дочірній елемент. Багато проблем позиціонування виникають через правило батьківського блока.

Перевірка псевдокласів

Стани :hover, :focus, :active часто важко перевірити, бо вони швидко змінюються під час взаємодії.

У панелі Styles натисніть кнопку :hov і виберіть потрібний стан:

• :hover;

• :active;

• :focus;

• :visited;

• :focus-within.

Наприклад, для кнопки можна примусово ввімкнути :hover і перевірити правило:

Якщо стиль не змінюється, перевірте:

• чи правильно написаний селектор;

• чи не перекреслена властивість;

• чи не перекриває кнопку інший елемент;

• чи не використано інше правило з вищою специфічністю.

Пошук проблеми через експерименти

DevTools дає змогу перевіряти гіпотези по одній.

Наприклад, картка несподівано виходить за межі екрана. Порядок перевірки може бути таким:

1. вибрати картку;

2. перевірити її ширину у Computed;

3. перевірити padding, border і box-sizing;

4. тимчасово вимкнути width, min-width або max-width;

5. перевірити батьківський контейнер;

6. перевірити, чи немає дочірнього елемента з фіксованою шириною;

7. перевірити горизонтальне переповнення.

Тимчасове вимкнення властивостей — не остаточне виправлення, а спосіб визначити причину.

Перевірка адаптивності

Для перевірки верстки на різних ширинах натисніть кнопку перемикання режиму пристрою або використайте Ctrl + Shift + M у Windows/Linux чи Cmd + Shift + M у macOS.

У цьому режимі можна:

• змінювати ширину та висоту області перегляду;

• перевіряти мобільну версію;

• бачити, як спрацьовують медіазапити;

• знаходити переповнення;

• перевіряти поведінку flex- і grid-розкладки.

Зменшуйте ширину вікна поступово та звертайте увагу на момент появи проблеми. Якщо елемент раптово стає занадто широким, перевірте:

• фіксовані значення width;

• min-width;

• довгий текст без перенесення;

• великі padding;

• зображення або інші дочірні елементи;

• медіазапити.

Практичний сценарій налагодження

Уявімо, що кнопка має бути синьою, але на сторінці вона сіра.

HTML:

CSS:

Алгоритм перевірки:

1. виберіть кнопку в Elements;

2. відкрийте панель Styles;

3. знайдіть властивість background;

4. подивіться, яке правило перекреслене;

5. порівняйте специфічність селекторів;

6. виправте CSS у файлі проєкту.

У цьому прикладі .card__button специфічніший за button, тому кнопка має бути синьою. Якщо сіра властивість не перекреслена, можливо, правило .card__button не завантажилося або клас відсутній у HTML.

Типовий порядок налагодження CSS

Коли елемент виглядає неправильно, використовуйте послідовний алгоритм:

1. Переконайтеся, що вибрали правильний елемент.

2. Перевірте, чи завантажений потрібний CSS-файл.

3. Перегляньте панель Styles.

4. Знайдіть перекреслені властивості.

5. Перевірте специфічність і порядок правил.

6. Перегляньте Computed для фінальних значень.

7. Перевірте модель блока.

8. Дослідіть батьківський контейнер.

9. Перевірте псевдокласи та медіазапити.

10. Перенесіть підтверджене виправлення у вихідний CSS.

Такий підхід допомагає не додавати випадкові правила, а знаходити конкретну причину проблеми.

Збереження змін

Зміни у вкладці Elements і панелі Styles тимчасові. Вони зникнуть після перезавантаження сторінки.

Тому після експерименту:

1. визначте правильне значення;

2. відкрийте відповідний CSS-файл у редакторі коду;

3. внесіть зміну у вихідний код;

4. збережіть файл;

5. оновіть сторінку та перевірте результат.

DevTools потрібен для дослідження та перевірки, а не для заміни редагування проєкту.

Типові помилки

Пошук проблеми лише в дочірньому елементі

Положення елемента часто визначає батьківський контейнер. Якщо margin і padding правильні, перевірте display, ширину та вирівнювання батьківського блока.

Ігнорування перекреслених властивостей

Перекреслена властивість не застосовується. Не потрібно змінювати її значення, доки не зрозуміло, яке правило її перезаписує.

Надмірне використання !important

!important може тимчасово приховати проблему зі специфічністю, але ускладнює подальше налагодження. Спочатку визначте, яке правило має перемогти, і виправте селектори або порядок правил.

Перевірка тільки вкладки Styles

Вкладка Styles показує правила, але не завжди очевидно показує фінальний результат. Для фактичних значень використовуйте Computed.

Забуті тимчасові зміни

Після експериментів сторінка може виглядати правильно лише у вашій вкладці. Перевірте зміни у вихідному файлі та перезавантажте сторінку.

Відсутність перевірки на різних ширинах

Стиль, який працює на широкому екрані, може зламатися на мобільному. Перевіряйте проблемні компоненти в режимі різних розмірів viewport.

Підсумок

Chrome DevTools допомагає налагоджувати CSS без постійного редагування та перезавантаження файлів.

Основні інструменти:

• Elements — перегляд і вибір HTML-елементів;

• Styles — перевірка та тимчасове редагування CSS-правил;

• Computed — перегляд фінальних обчислених значень;

• Box Model — аналіз content, padding, border і margin;

• кнопка :hov — перевірка псевдокласів;

• режим пристрою — перевірка адаптивної верстки.

Найефективніший підхід — знайти елемент, перевірити його правила, визначити перезаписану властивість, перевірити фінальне значення в Computed, а потім перенести підтверджене виправлення у вихідний код.