Коли відкриваєш сайт, бачиш тільки те, що доступне користувачу – текст, зображення, кнопки. Але за кожною сторінкою стоїть код, стилі, сценарії та запити, які формують її роботу.
Chrome DevTools: це набір інструментів, вбудованих у браузер Google Chrome, який дозволяє розробникам і користувачам детально аналізувати та оптимізувати веб-сайти. За допомогою DevTools ви можете переглядати код сторінки, налагоджувати JavaScript, відслідковувати завантаження ресурсів, тестувати адаптивний дизайн і оцінювати продуктивність сайту.
Цей інструмент стане корисним для вас, якщо ви хочете швидко знаходити помилки, покращувати швидкість завантаження сторінок і контролювати, як сайт виглядає та працює на різних пристроях. Ви отримуєте доступ до глибокого аналізу без додаткового програмного забезпечення, що робить процес роботи більш ефективним і зрозумілим.
Щоб розібратися, як усе це влаштовано, у Google Chrome є спеціальний набір інструментів – Chrome DevTools. Він дозволяє буквально заглянути всередину сторінки, змінити її вигляд чи поведінку і зрозуміти, що відбувається у реальному часі.
Chrome DevTools – це вбудований набір інструментів у браузері Google Chrome, який допомагає розробникам аналізувати і налагоджувати вебсторінки.
Ці інструменти створені для розробників і тестувальників, але вони корисні й тим, хто тільки починає свій шлях у веброзробці. З їх допомогою можна швидко перевірити HTML та CSS, знайти помилки у JavaScript, протестувати сайт на різних пристроях або подивитися, чому сторінка вантажиться повільно.
Chrome DevTools поєднує все необхідне, щоб працювати з сайтом не тільки як користувач, а й як фахівець.
Chrome DevTools
Chrome DevTools (developer tools) – це набір інструментів, які допомагають програмістам тестувати сайти і виправляти помилки в інтерактивному режимі. З цієї статті ви дізнаєтеся, як користуватися DevTools на прикладі реальних завдань веб-розробника.
Як відкрити інструменти розробника?
Для початку – відкриємо «Інструменти». Це можна зробити як мінімум трьома способами:
- Однією кнопкою – F12.
- Поєднанням клавіш – Ctrl + Shift + I у Windows або Command + Option + I у macOS.
- Через меню: натискаємо на три крапки → «Додаткові інструменти» → «Інструменти для розробників».
Ці способи відкрити Chrome DevTools працюватимуть у всіх браузерах, де використовується хромівський рушій: Opera, Microsoft Edge, Mozilla, Brave І в цьому ще одна принадність інструментів розробника Chrome – якщо освоїте їх, зможете приборкати практично будь-який сучасний браузер.
Chrome DevTools гарячи клавіши
Відкриття DevTools
- Windows/Linux: Ctrl + Shift + I або F12
- Mac: Cmd + Option + I
Перемикання між панелями
Відкрити консоль:
- Windows/Linux: Ctrl + Shift + J
- Mac: Cmd + Option + J
Відкрити панель елементів (Elements):
- Windows/Linux: Ctrl + Shift + C
- Mac: Cmd + Shift + C
Навігація і пошук
- Пошук у коді сторінки: Ctrl + F / Cmd + F
- Перейти до файлу (Sources): Ctrl + P / Cmd + P
- Пошук по всіх файлах: Ctrl + Shift + F / Cmd + Option + F
Робота з елементами
- Виділити елемент на сторінці: Ctrl + Shift + C / Cmd + Shift + C
- Редагувати атрибут або текст: подвійний клік на елементі (клавіш нема, але це дуже швидко)
Консоль
- Відкрити новий рядок у консолі: Shift + Enter
- Виконати команду: Enter
Вкладки DevTools
Тепер розберемо основні вкладки DevTools і їхнє призначення.
Elements
Дає змогу переглядати і редагувати елементи DOM-дерева сторінки. Працює так: наводите курсор на рядок коду, а браузер підсвічує вам елемент сторінки, за який він відповідає.
Це зручно: можна в лайв-режимі змінювати параметри об’єктів і відразу спостерігати за змінами. Своєю чергою, у Elements є кілька додаткових вкладок для роботи зі стилями, параметрами і подіями елемента.
Sources
Щось на кшталт вбудованого середовища розробки, яке дає змогу дивитися і редагувати файли, з яких складається веб-сторінка.
Як у справжньому редакторі коду, область перегляду в Sources можна ділити на воркспейси і працювати з ними паралельно. А ще тут є інструменти для налагодження JavaScript за допомогою брейк-пойнтів – спеціальних точок зупинки в коді.
Console
Її величність консоль – перетворює браузер на інтерпретатор JS-коду, завдяки чому ви можете запустити на будь-якій сторінці абсолютно будь-який скрипт.
Але це, звісно, не єдине її призначення. А потрібна вона головним чином для діагностики – тут ви зможете подивитися помилки, що виникли під час відкриття сторінки, дізнатися їхнє розташування в коді та вивантажити логи в окремий файл.
Network
Виводить у вигляді таблиці всі запити, якими обмінюються браузер і сервер. Запити можна фільтрувати за типом, статусом та іншими параметрами.
Основний сенс у тому, щоб вивчити, скільки часу йде на завантаження кожного ресурсу, виявити найбільш ненажерливі процеси та оптимізувати їх.
Security
На цій вкладці можна з’ясувати, наскільки безпечна сторінка і які протоколи шифрування вона використовує. А для тих, хто хоче заглибитися в нюанси, є можливість вивчити сертифікат.
Performance
Дає змогу аналізувати продуктивність сторінки під час її роботи. Працює просто: відкриваєте вкладку, натискаєте кнопку запису, і через деякий час браузер виводить вам усі дані про роботу сторінки: використання пам’яті, виконання скриптів, час відгуку, мережеві запити тощо.
Частий кейс: подивитися, чи не занадто багато оперативки і ресурсів клієнтської машини під’їдає сторінка.
Memory
Ще один хороший інструмент для контролю навантаження коду на систему. За замовчуванням показує, скільки пам’яті споживає сторінка, але можна запросити детальний звіт за кожним елементом.
Цікаво, що до цього звіту потрапляють не тільки елементи сайту, а й хромівські розширення – тобто можна на власні очі побачити, скільки споживають різні проксі, скріншотерізи та інші адблоки.
Lighthouse
А якщо не хочете копатися в цих нетрях самі, можна попросити Chrome скласти для вас докладний звіт.
Браузер проаналізує ваш сайт за чотирма основними параметрами: продуктивність, доступність, SEO та найкращі практики, а потім ще й роздасть поради, що поправити, щоб ці показники поліпшити.
Можливості Chrome DevTools
А тепер розберімо кілька кейсів, у яких ці інструменти можуть бути корисними. Вони можуть здатися досить дитячими та кумедними, але для першого знайомства з DevTools цілком підійдуть 🙂
Шукаємо і виправляємо баги
Ситуація: ви зробили свій сайт, а він працює якось незграбно – картинки не вантажаться, кнопки не натискаються, слайдери поїхали в підвал, а замість красивих шрифтів стандартний Times New Roman. Як бути?
Можна перелопатити весь код проекту і знайти помилки вручну. Але якщо сайт великий і складний, на це піде багато годин.
Рішення: переходимо в панель Console браузера. Там дивимося, в який рядок коду закралася помилка, що вона означає, і виправляємо баг на льоту.
На нашому сайті Chrome виявив дві проблеми: загубилися фотографії та CSS. Так буває, коли якийсь рядок у коді посилається на неіснуючий файл. Наприклад, якщо ми замість реально існуючої картинки photo.png випадково викликаємо foto.png.
Редагуємо вихідний код
Уся зовнішня сторона інтернету пишеться трьома мовами: HTML, CSS і JavaScript. Якщо знати їх на базовому рівні, можна переробити будь-який сайт так, як вам подобається: перефарбувати тло, поміняти шрифти, додати обведення картинкам. Ось як це зробити за допомогою панелі DevTools:
- Наводимо курсор на елемент, який хочемо змінити.
- Клікаємо правою кнопкою і вибираємо «Подивитися код» – відкриється вкладка Elements.
- Браузер підсвічує елемент і показує, який код за нього відповідає.
А далі справа за нами – десь кольори докрутити, десь обведення поміняти. Загалом, усе, що придумаєте.
Змінюємо сторінки
Якщо активувати «режим дизайну», можна редагувати сайти в Chrome без коду – як звичайний текст. Ось навіщо це може стати в пригоді:
- Для роботи – наприклад, щоб перевірити, чи не «розповзеться» макет, якщо завантажити туди новий контент. Це важливе завдання для веб-дизайнера.
- Для розваги – наприклад, щоб розіграти друзів або виправити оцінки в електронному щоденнику.
Щоб перейти в дизайн-мод, відкрийте панель Console в інструментах розробника і запустіть ось таку команду:
document.designMode = ‘on’
Тепер можна закривати консоль і робити все, що душа просить.
Єдиний момент – усі зміни видно тільки вам і вони скинуться відразу після перезавантаження сторінки. Тож прокачати сайт назавжди не вийде. А шкода.
Аналізуємо доступність сайту
Важлива частина роботи фронтендера – зробити так, щоб сайт було зручно читати на мобільних пристроях. Для цього в панелі DevTools є режим смартфона – він імітує роботу різних девайсів і допомагає адаптувати контент під невеликі екрани.
Ось що можна налаштовувати з його допомогою:
- Візуальну частину – простежити, щоб сайт правильно відображався на смартфоні: текст не виїжджав за межі, елементи нормально групувалися, а кнопки не затуляли контент.
- Залізо – подивитися, як сайт працює з апаратною частиною смартфона: процесором, зв’язком, GPS або сканером відбитків.
Припустимо, нам треба подивитися, який вигляд має сайт на iPhone 12 Pro. Щоб це зробити, відкриваємо інструменти розробника і натискаємо на кнопку зліва від вкладки Elements.
Розбираємося зі швидкістю
Щоб сайти швидко відкривалися і не гальмували, їх потрібно періодично оптимізувати – працювати з пам’яттю, мережевими запитами і навантаженням на залізо. Ось три вкладки в панелі DevTools, які можуть із цим допомогти:
- «Мережа» – подивитися, скільки часу займає завантаження сайту.
- «Продуктивність» – дізнатися, як сайт поводиться після завантаження і як впливає на процесор користувача.
- «Пам’ять» – зрозуміти, які частини коду під’їдають оперативку і як із цим боротися.
Якщо не хочете з цим возитися, можна запросити автоматичний звіт про стан сайту у вкладці Lighthouse. Браузер сам розповість, які у сайту є проблеми щодо заліза і як їх вирішити. А ще дасть поради щодо верстки, контенту та пошукової оптимізації.
Скрипти
Писати код можна не тільки в спеціальних програмах – звичайний браузер теж підходить. Для цього там є інтерпретатор, який вміє виконувати команди на JavaScript. У такий спосіб можна запускати будь-який код на будь-якому сайті, навіть якщо у вас немає до нього доступу.
Ось як це зробити:
- Беремо код на JavaScript.
- Вставляємо в консоль браузера.
- Браузер перевіряє його на помилки, а потім виконує построково.
- Відбувається магія.
Висновок
Chrome DevTools відкриває можливість бачити сайт зсередини і працювати з ним безпосередньо в браузері. Тут можна перевірити, як виглядає верстка на різних екранах, знайти помилки в JavaScript, відстежити роботу мережевих запитів і зрозуміти, що саме гальмує сторінку. Це інструмент, який допомагає швидко знаходити і виправляти проблеми, а також експериментувати з кодом у реальному часі.
Для новачків DevTools стане підказкою, яка дозволяє краще зрозуміти, як працює вебсайт. Для досвідчених розробників – це робоче середовище, яке економить час і дає більше контролю над результатом. Важливо те, що цей набір інструментів завжди під рукою: достатньо відкрити браузер і натиснути кілька клавіш.
Освоївши DevTools, ви зможете швидше розбиратися з помилками, впевненіше працювати з кодом і бачити сайт очима браузера. Це знання стане основою, на якій зручно будувати подальші навички у веброзробці.
