Dev Tools

13.1 Ознайомлення з Chrome Dev Tools

Chrome DevTools — це потужний набір інструментів для веб-розробників, вбудований у браузер Google Chrome. Ці інструменти дозволяють розробникам відлагоджувати код, аналізувати продуктивність і змінювати сторінки "на льоту".

Відкрийте інструменти розробника у своєму браузері (зазвичай через F12 або Ctrl+Shift+I) і перейдіть на вкладку "Консоль", щоб побачити виведені повідомлення.

Зазвичай вона виглядає десь так:

Давайте розглянемо детальніше три ключові вкладки: Elements, Console і Network.

13.2 Вкладка Elements

Вкладка Elements використовується для вивчення та редагування HTML і CSS на веб-сторінці в реальному часі.

Основні можливості:

1. Вивчення DOM: відображає структуру HTML-документа як дерево DOM. Ви можете розгортати і згортати вузли (node), щоб вивчити структуру сторінки.
2. Редагування HTML: ви можете редагувати HTML-елементи, додавати або видаляти теги, атрибути та текстові вузли прямо в інтерфейсі DevTools.
3. Редагування CSS: у правій частині панелі відображаються стилі, застосовані до обраного елемента. Ви можете редагувати існуючі стилі або додавати нові правила CSS.
4. Інспекція елементів: ви можете вибрати елемент на сторінці, натиснувши на іконку "Select an element" (або скориставшись гарячою клавішею Ctrl+Shift+C) і клікнувши на потрібний елемент на веб-сторінці.
5. Стилі та обчислені стилі: панель показує застосовані до елемента стилі та обчислені стилі, що дозволяє побачити, які стилі врешті-решт застосовуються до елемента.

13.3 Вкладка Network

Вкладка Network використовується для моніторингу мережевих запитів, що виконуються сторінкою. Це корисно для аналізу продуктивності і відлагодження проблем із завантаженням ресурсів.

Основні можливості:

1. Моніторинг мережевих запитів: відображає всі HTTP-запити, виконані сторінкою, включаючи запити на завантаження HTML, CSS, JavaScript, зображень та інших ресурсів.
2. Деталізація запитів: при виборі конкретного запиту ви можете побачити детальну інформацію, таку як заголовки запиту та відповіді, дані запиту, час завантаження тощо.
3. Аналіз продуктивності: дозволяє відстежувати час завантаження ресурсів і визначати вузькі місця, які сповільнюють завантаження сторінки.
4. Фільтрація та сортування: ви можете фільтрувати запити за типом (XHR, JS, CSS тощо), а також сортувати їх за різними критеріями (час, розмір, статус тощо).
5. Throttle (Обмеження): можливість симуляції повільного з'єднання для тестування продуктивності сторінки при різних швидкостях інтернету.

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