Основи роботи з DevTools
Дізнайтеся, як відкривати та налаштовувати DevTools для ефективної роботи
DevTools надає потужні інструменти для розробки та налагодження веб-застосунків.
DevTools надає потужні інструменти для розробки та налагодження веб-застосунків.
DevTools (Developer Tools) – це набір інструментів, вбудованих у браузери, таких як Google Chrome, Firefox, Edge, для налагодження, аналізу та оптимізації веб-сторінок та програм. Ось основні кроки та приклади, як використовувати та налаштовувати DevTools.
Використовуйте клавіші F12 або Ctrl + Shift + I (на Windows) и Cmd + Opt + I (на macOS).
Ви можете перетягувати панелі, змінювати їх розмір та навіть вибирати між світлою та темною темою для комфортної роботи.
Вивчимо структуру DOM і навчимося змінювати HTML та CSS у реальному часі
Навчіться використовувати консоль для налагодження та логування інформації
Вивчимо вкладку Network та навчимося аналізувати мережеві запити
Навчіться використовувати вкладку Performance для аналізу та оптимізації продуктивності вашої програми
Дозволяє переглядати та змінювати HTML та CSS.
Місце для виконання JavaScript коду та логування.
Відстеження запитів мережі.
Перегляд та налагодження вихідного коду JavaScript.
Аналіз продуктивності.
Управління сховищем (cookies, local storage та ін.).
Перевірка безпеки сторінки.
Автоматичний аудит продуктивності, доступності та SEO.
Для демонстрації будемо використовувати сайт google.com. Розглянемо, як використовувати вкладку Elements в DevTools для перегляду та зміни HTML та CSS на цьому сайті.
1. Перегляд структури DOM:
На вкладці Elements можна бачити дерево DOM, яке представляє структуру HTML документа.
Завдання: Відкрийте сайт google.com і відкрийте DevTools (F12 або Ctrl + Shift + I). Перейдіть на вкладку Elements. Ви побачите структуру HTML сторінки, включаючи теги <html>, <head>, <body> та їх вміст.
2. Вибір елемента на сторінці:
Ви можете вибрати будь-який елемент на сторінці для детального вивчення та редагування.
Завдання: На сайті google.com, натисніть на іконку курсора у верхньому лівому куті вкладки Elements, а потім клацніть на логотип Google. В DevTools цей елемент буде виділено в дереві DOM.
3. Зміна HTML:
Ви можете змінювати HTML елементи прямо в DevTools.
Завдання: Виділіть елемент логотипу Google (тег <img>). Двічі клацніть на атрибут alt і змініть текст на «My Google Logo». Натисніть Enter, і зміна відразу відобразиться в вихідному коді.
4. Редагування атрибутів:
Ви можете додавати, змінювати або видаляти атрибути HTML елементів.
Завдання: На сайті google.com, виберіть елемент <img> логотипу. Клацніть правою кнопкою миші на елементі в DevTools і виберіть Edit as HTML. Додайте атрибут title=»Google Logo». Натисніть Enter, і ви побачите, що атрибут доданий до елемента.
5. Зміна CSS:
Ви можете змінювати стилі CSS для елементів.
Завдання: На сайті google.com, виберіть елемент <img> логотипу. У правій панелі DevTools ви побачите розділ Styles. Додайте нову властивість, наприклад, filter: grayscale(100%);. Логотип на сторінці стане чорно-білим.
6. Приховування елементів:
Ви можете приховувати елементи на сторінці, щоб перевірити, як сторінка виглядає без них.
Завдання: На сайті google.com, виберіть елемент <img> логотипу. У розділі Styles додайте властивість display: none;. Логотип зникне зі сторінки.
7. Додавання нових елементів:
Ви можете додавати нові HTML елементи в структуру DOM.
Завдання: На сайті google.com, клацніть правою кнопкою миші на елементі <body> і виберіть Edit as HTML. Додайте новий елемент <p>Hello, this is a new paragraph!</p>. Натисніть Enter, і новий параграф з’явиться на сторінці.
8. Стилізація за допомогою CSS класів:
Ви можете додавати CSS класи до елементів для застосування попередньо визначених стилів.
Завдання: На сайті google.com, виберіть елемент <input> пошукового рядка. У розділі Styles, додайте новий клас, наприклад, class=»highlight». Якщо у вас в стилях визначено клас .highlight { border: 2px solid red; }, пошуковий рядок отримає червону рамку.
Вкладка Console в DevTools надає потужні можливості для відлагодження та взаємодії з веб-сторінками за допомогою JavaScript.
1. Відкриття консолі:
2. Основні команди та їх використання:
2.1. console.log():
Використовується для виведення повідомлень і значень змінних в консоль.
Приклад:
console.log('Hello, Google!');Виводить рядок «Hello, Google!» в консоль.
2.2. console.error():
Використовується для виведення повідомлень про помилки.
Приклад:
console.error('This is an error message.');Виводить повідомлення про помилку в консоль.
2.3. console.warn():
Використовується для виведення попереджувальних повідомлень.
Приклад:
console.warn('This is a warning message.');Виводить попереджувальне повідомлення в консоль.
2.4. console.table():
Використовується для відображення масивів та об’єктів у вигляді таблиць.
Приклад:
let users = [
{name: 'John', age: 30},
{name: 'Jane', age: 25},
{name: 'Doe', age: 40}
];
console.table(users);Відображає масив об’єктів у вигляді таблиці.
2.5. console.dir():
Використовується для відображення інтерактивного списку властивостей JavaScript об’єкта.
Приклад:
let element = document.querySelector('body');
console.dir(element);Відображає DOM-елемент <body> у вигляді інтерактивного списку його властивостей.
3. Робота зі змінними та елементами сторінки:
3.1. Отримання елементів:
Ви можете використовувати JavaScript для отримання елементів на сторінці та роботи з ними.
Приклад:
let searchButton = document.querySelector('input[name="btnK"]');
console.log(searchButton);Виводить в консоль елемент кнопки пошуку на сторінці Google.
3.2. Зміна тексту елемента:
Ви можете змінювати текст елементів прямо з консолі.
Приклад:
let logo = document.querySelector('#hplogo');
logo.alt = 'New Alt Text';
console.log(logo.alt);Змінює текст атрибута alt для логотипа Google та виводить новий текст в консоль.
4. Виконання функцій:
Ви можете виконувати будь-які функції та відлагоджувати їх прямо з консолі.
Приклад:
function greet(name) {
return 'Hello, ' + name + '!';
}console.log(greet('Google'));Виконує функцію greet з аргументом ‘Google’ та виводить результат в консоль.
5. Використання виразів:
Консоль дозволяє вам виконувати будь-які JavaScript вирази.
Приклад:
let x = 10;
let y = 20;
let sum = x + y;
console.log(sum);Обчислює суму змінних x і y та виводить результат в консоль.
6. Робота з подіями:
Ви можете додавати та відлагоджувати події прямо з консолі.
Приклад:
document.querySelector('input[name="btnK"]').addEventListener('click', function() {
console.log('Search button clicked!');
});Додає обробник події для кнопки пошуку, який виводить повідомлення в консоль при натисканні.
Вкладка Network в DevTools дозволяє відстежувати всі мережеві запити, зроблені вашим веб-додатком. Це включає в себе запити на завантаження HTML, CSS, JavaScript, зображень та інших ресурсів.
Відкриття та базове налаштування вкладки Network
Відкриття вкладки Network:
Перезавантаження сторінки:
Щоб побачити всі запити, зроблені при завантаженні сторінки, натисніть F5 або Ctrl + R / Cmd + R для перезавантаження сторінки з відкритою вкладкою Network.
Основні елементи вкладки Network
Фільтри:
У верхній частині вкладки Network ви можете вибрати типи запитів, які хочете побачити (All, XHR, JS, CSS, Img, Media, Font, Doc, WS, Other).
Приклад: Виберіть Img, щоб побачити тільки запити зображень.
Таблиця запитів:
У таблиці відображаються всі запити з такими стовпцями, як Name, Status, Type, Initiator, Time та інші.
Приклад: Знайдіть запит до основного документу HTML, який завантажується першим при відкритті google.com.
Деталі запиту:
Натисніть на будь-який запит у таблиці, щоб побачити його деталі, включаючи заголовки, навантаження, попередній перегляд та відповідь.
Приклад: Натисніть на запит до основного HTML-документу та перегляньте заголовки (Headers).
Приклади аналізу мережевих запитів на google.com
Аналіз запитів до основних ресурсів:
Після перезавантаження сторінки ви побачите запити до різних ресурсів, таких як HTML, CSS, JS та зображення.
Приклад: Знайдіть запит до https://www.google.com та проаналізуйте заголовки. Зверніть увагу на заголовки Content-Type, Cache-Control та Expires.
Фільтрація запитів:
Використовуйте фільтри для виділення певних типів запитів.
Приклад: Виберіть фільтр JS, щоб побачити всі запити до JavaScript-файлів. Ви побачите такі файли, як base.js або main.js.
Аналіз часу завантаження:
У таблиці запитів зверніть увагу на стовпці Time та Waterfall.
Приклад: Подивіться на діаграму Waterfall, щоб зрозуміти, скільки часу зайняв кожен запит та як вони взаємодіяли один з одним. Це допоможе вам знайти вузькі місця в продуктивності.
Завантаження зображень:
Виберіть фільтр Img, щоб побачити всі запити до зображень.
Приклад: Знайдіть запит до логотипу Google та проаналізуйте його деталі. Зверніть увагу на розмір файлу та час завантаження.
Використання вкладки Timing:
Всередині деталей запиту перейдіть на вкладку Timing, щоб побачити розбивку часу завантаження.
Приклад: Знайдіть запит до https://www.google.com та перейдіть на вкладку Timing. Ви побачите такі етапи, як DNS Lookup, Initial Connection, SSL, Request Sent, Waiting (TTFB), та Content Download. Це допоможе вам зрозуміти, де виникають затримки.
Аналіз POST-запитів:
Якщо на сторінці виконуються POST-запити (наприклад, при відправці форми), ви можете проаналізувати їх дані.
Приклад: При виконанні пошуку на Google, у таблиці запитів з’явиться POST-запит. Натисніть на нього та перейдіть на вкладку Headers, щоб побачити відправлені дані.
Приклади практичного використання
Пошук та усунення проблем із завантаженням ресурсів:
Приклад: Якщо ваш сайт завантажується повільно, використовуйте вкладку Network, щоб знайти ресурси, які займають багато часу на завантаження. Наприклад, ви можете виявити, що одне із зображень занадто велике та потребує оптимізації.
Відлагодження проблем із CORS:
Приклад: Якщо ваш JavaScript-код виконує запити до зовнішніх API та стикається з проблемами CORS (Cross-Origin Resource Sharing), вкладка Network допоможе вам побачити відповіді сервера та зрозуміти, які заголовки відсутні або неправильно налаштовані.
Перевірка кешування:
Приклад: Переконайтеся, що ваші ресурси правильно кешуються. Знайдіть запит до вашого CSS-файлу та подивіться на заголовки Cache-Control та Expires. Це допоможе вам переконатися, що браузер правильно кешує ваш контент для прискорення наступних завантажень.
Вкладка Sources в DevTools дозволяє вам переглядати, редагувати та відлагоджувати JavaScript-код на вашій веб-сторінці. Використовуючи Google.com як приклад, ми розглянемо основні функції вкладки Sources.
1. Відкриття вкладки Sources
Щоб відкрити вкладку Sources, виконайте наступні кроки:
Приклад: На сайті Google.com відкрийте DevTools і перейдіть на вкладку Sources.
2. Дослідження файлів
На вкладці Sources ви можете бачити дерево файлів, завантажених на сторінку. Воно зазвичай ділиться на три панелі:
Приклад: У навігаторі файлів виберіть файл main.js або подібний (залежно від структури сайту Google.com), щоб переглянути його вміст.
3. Встановлення точок зупину (Breakpoints)
Точки зупину дозволяють вам зупинити виконання коду в певному місці та дослідити поточний стан змінних та викликів функцій.
Приклад: У вибраному файлі main.js знайдіть цікаву вам функцію і встановіть точку зупину на першому рядку цієї функції.
4. Пошагове відлагодження (Stepping through code)
Після встановлення точки зупину ви можете пошагово виконувати код, використовуючи наступні інструменти:
Приклад: Встановіть точку зупину у функції обробки кліку і натисніть кнопку пошуку на Google.com, щоб зупинити виконання коду. Використовуйте Step Over, Step Into та Step Out для дослідження виконання коду.
5. Інспектування змінних та контексту (Inspect variables and context)
Коли виконання коду зупиняється на точці зупину, ви можете:
Приклад: Встановіть точку зупину у функції обробки введення в пошукову строку Google.com. Коли виконання коду зупиниться, вивчіть значення змінних на панелі Scope.
6. Використання Watch Expressions
Watch Expressions дозволяють вам стежити за зміною значень змінних або виразів.
Приклад: Додайте вираз document.getElementById('searchbox').value у Watch Expressions і стежте за змінами, коли користувач вводить текст у пошукову строку.
7. Використання Snippets
Snippets – це невеликі фрагменти коду, які можна зберігати та запускати за потреби.
Приклад: Створіть снипет з кодом alert('Hello, Google!') і запустіть його, щоб побачити спливаюче повідомлення на сторінці Google.com.
8. Локальні зміни та збереження
Ви можете тимчасово змінювати код у DevTools і тестувати його.
Приклад: Змініть текст у функції, яка відповідає за відображення тексту на сторінці, і подивіться результат.
Написання та запуск Snippet
// Приклад снипета: виводить повідомлення в консоль та відображає alert
console.log('Hello from Snippet!');
alert('Hello, Google!');3. Перевірка результату
Приклад:
console.log('Hello from Snippet!');
alert('Hello, Google!');
4. Приклади корисних снипетів
Ось декілька прикладів снипетів, які можуть бути корисними при роботі з веб-сторінками:
Перевірка часу завантаження сторінки:
console.log('Page load time is ' + (window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart) + ' ms');Виділення всіх посилань на сторінці:
const links = document.querySelectorAll('a');
links.forEach(link => link.style.backgroundColor = 'yellow');
console.log('Highlighted ' + links.length + ' links.');Очищення всіх cookie:
document.cookie.split(";").forEach(function(c) {
document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
});
alert('All cookies have been deleted.');Вкладка Application в DevTools надає доступ до різних даних і ресурсів, які веб-сторінки зберігають у браузері. Ці дані можуть включати файли cookie, local storage, session storage, кешовані ресурси, бази даних IndexedDB, файли сервісу воркера і багато іншого. Розглянемо більш детально роботу з Application на прикладі сайту google.com.
Приклад 1: Зміна Cookies
Відкрийте Google.com у вашому браузері (наприклад, Google Chrome).
Відкрийте DevTools:
Натисніть F12 або Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac).
Або клацніть правою кнопкою миші на сторінці та виберіть «Переглянути код».
Перейдіть на вкладку Application.
У лівій панелі виберіть Cookies і потім https://www.google.com.
Знайдіть cookie з ім’ям 1P_JAR (це один з основних cookies, який використовує Google).
Змініть значення цього cookie:
Двічі клацніть на значення.
Введіть нове значення, наприклад, test_value_123.
Натисніть Enter, щоб зберегти зміни.
Приклад 2: Додавання даних до Local Storage
Відкрийте Google.com і потім DevTools.
Перейдіть на вкладку Application.
У лівій панелі виберіть Local Storage і потім https://www.google.com.
Додайте нову пару ключ-значення:
Натисніть на кнопку + у нижній частині таблиці.
Введіть ключ, наприклад, test_key_123.
Введіть значення, наприклад, test_value_123.
Натисніть Enter, щоб зберегти зміни.
Приклад 3: Очищення кешу
Відкрийте Google.com і потім DevTools.
Перейдіть на вкладку Application.
У лівій панелі виберіть Cache і потім Cache Storage.
Очистіть кеш:
Натисніть правою кнопкою миші на кешовані дані.
Виберіть Delete.
Приклад 4: Використання Session Storage
Відкрийте Google.com і потім DevTools.
Перейдіть на вкладку Application.
У лівій панелі виберіть Session Storage і потім https://www.google.com.
Додайте нову пару ключ-значення:
Натисніть на кнопку + у нижній частині таблиці.
Введіть ключ, наприклад, session_key_123.
Введіть значення, наприклад, session_value_123.
Натисніть Enter, щоб зберегти зміни.
Приклад 5: Перегляд і редагування IndexedDB
Відкрийте Google.com і потім DevTools.
Перейдіть на вкладку Application.
У лівій панелі виберіть IndexedDB.
Перегляньте бази даних і об’єктні сховища:
Якщо Google.com використовує IndexedDB, ви побачите відповідні бази даних і об’єктні сховища.
Ви можете додавати, змінювати і видаляти записи в об’єктних сховищах.
Приклад 6: Використання Service Workers
Відкрийте Google.com і потім DevTools.
Перейдіть на вкладку Application.
У лівій панелі виберіть Service Workers.
Перегляньте активні Service Workers:
Якщо Google.com використовує Service Workers, ви побачите їх список.
Ви можете перевірити стан, оновити або зупинити Service Worker.
Однак це лише частина з того, що ми можемо вам запропонувати. На нашому повноцінному курсі ви зможете отримати поглиблені знання та навички, які допоможуть вам стати справжнім майстром DevTools.
Якщо вам потрібна будь-яка підтримка або у вас виникли додаткові питання, не соромтеся зв'язатися з нами, ми готові швидко надати вам допомогу.
