Пошук уроків, статей та іншого контенту
Що таке інструменти розробника і як з ними працювати у браузері
Developer Tools, або DevTools, — набір інструментів браузера для розробників.
Без DevTools сучасну веброзробку уявити складно.
У більшості браузерів:
F12або:
Ctrl + Shift + IНа macOS:
Cmd + Option + IТакож можна натиснути правою кнопкою на елемент сторінки та вибрати Inspect / Перевірити.
Вкладка Elements дозволяє переглядати DOM.
Наприклад:
<button class="btn">
Купити
</button>Через DevTools можна тимчасово змінити:
текст;
HTML;
CSS;
класи;
атрибути.
Це зручно для експериментів.
Важливо: такі зміни не редагують файли на сервері та зазвичай зникають після перезавантаження сторінки.
Console показує:
повідомлення програми;
JavaScript-помилки;
warnings;
результати console.log();
результати виконання введеного вручну коду.
Наприклад:
console.log("Hello");У Sources можна переглядати JavaScript-файли та налагоджувати код.
Одна з найважливіших можливостей — breakpoints.
Наприклад:
function calculatePrice(price, quantity) {
const total = price * quantity;
return total;
}Можна поставити breakpoint на:
const total = price * quantity;і зупинити програму в цей момент.
Після цього можна перевірити значення:
price
quantity
totalВкладка Network показує мережеві запити.
Тут можна побачити:
document
JavaScript
CSS
images
API requests
fontsНаприклад, якщо застосунок запитує:
GET /api/usersNetwork дозволяє перевірити:
URL;
HTTP-метод;
status code;
headers;
request body;
response.
Тут можна працювати з даними браузера:
Local Storage
Session Storage
Cookies
IndexedDBЦя вкладка стане особливо корисною при вивченні зберігання даних на клієнті.
Ігнорувати Console. Якщо код не працює, Console — одне з перших місць, куди варто подивитися.
Намагатися налагоджувати все через console.log. Це корисний інструмент, але breakpoints часто дають значно більше інформації.
Думати, що редагування Elements змінює сайт назавжди. Зміни в DevTools переважно локальні та тимчасові.
DevTools — один із головних інструментів веброзробника.
На початку особливо важливо освоїти:
Elements
Console
Sources
NetworkЧим раніше ви звикнете користуватися DevTools, тим простіше буде знаходити та виправляти проблеми у коді.