Пошук уроків, статей та іншого контенту
Встановите React Developer Tools і використаєте їх для перегляду компонентів та налагодження React-застосунків.
React Developer Tools — це розширення для браузера, яке допомагає досліджувати React-застосунки без додавання тимчасових console.log.
За допомогою DevTools можна:
переглядати дерево React-компонентів;
бачити props, state і значення хуків;
знаходити компонент, який відповідає елементу на сторінці;
переглядати батьківські та дочірні компоненти;
аналізувати повторні рендеринги за допомогою Profiler;
перевіряти, які дані отримує компонент;
швидше знаходити причину неправильного відображення інтерфейсу.
React Developer Tools працює поверх звичайних інструментів розробника браузера. Після встановлення в DevTools з’являються вкладки Components і Profiler.
React Developer Tools встановлюється як розширення для браузера. Потрібно знайти офіційне розширення React Developer Tools у магазині розширень вашого браузера та натиснути кнопку встановлення.
Підтримуються сучасні версії популярних браузерів, зокрема:
Google Chrome;
Mozilla Firefox;
Microsoft Edge.
Після встановлення:
Відкрийте React-застосунок у браузері.
Відкрийте DevTools клавішею F12 або комбінацією Ctrl + Shift + I (Cmd + Option + I у macOS).
Перевірте, чи з’явилися вкладки Components і Profiler.
Якщо сторінка не містить React-застосунку, ці вкладки можуть бути відсутніми або не показувати компонентів.
Створимо невеликий компонент із пропсами, станом і хуком useMemo. Саме ці дані зручно переглядати в React Developer Tools.
import { useMemo, useState } from 'react';
function ProductCard({ name, initialQuantity = 1 }) {
const [quantity, setQuantity] = useState(initialQuantity);
const total = useMemo(() => {
return quantity * 250;
}, [quantity]);
return (
<article>
<h2>{name}</h2>
<p>Кількість: {quantity}</p>
<p>Сума: {total} грн</p>
<button onClick={() => setQuantity((value) => value + 1)}>
Додати
</button>
<button
onClick={() => setQuantity((value) => Math.max(0, value - 1))}
>
Забрати
</button>
</article>
);
}
function App() {
const [showSecondProduct, setShowSecondProduct] = useState(true);
return (
<main>
<h1>Кошик</h1>
<button onClick={() => setShowSecondProduct((value) => !value)}>
{showSecondProduct ? 'Приховати' : 'Показати'} другий товар
</button>
<ProductCard name="Клавіатура" initialQuantity={1} />
{showSecondProduct && (
<ProductCard name="Миша" initialQuantity={2} />
)}
</main>
);
}
export default App;Цей код можна використати у звичайному React-проєкті, наприклад створеному за допомогою Vite. Після запуску застосунку відкрийте його в браузері та перейдіть до вкладки Components.
Вкладка Components показує дерево компонентів React. Для наведеного прикладу дерево приблизно міститиме:
App;
два екземпляри ProductCard;
внутрішні компоненти, якщо вони використовуються бібліотекою або фреймворком.
Виберіть компонент ProductCard у дереві. Праворуч або в іншій частині панелі з’явиться інформація про нього.
Для першого компонента ProductCard можна побачити:
name: "Клавіатура"
initialQuantity: 1Для другого компонента:
name: "Миша"
initialQuantity: 2Це допомагає перевірити, чи справді компонент отримав очікувані дані від батьківського компонента.
Наприклад, якщо на сторінці відображається неправильна назва товару, спочатку виберіть ProductCard і перевірте значення name. Так можна визначити, де виникла проблема:
батьківський компонент передає неправильне значення;
компонент неправильно використовує props;
проблема знаходиться не в даних, а в стилях або розмітці.
У ProductCard є стан quantity. Після вибору компонента DevTools показує значення цього стану.
Натисніть кнопку Додати в застосунку. Значення quantity має збільшитися на одиницю, а значення total — перерахуватися.
Так можна перевірити:
чи змінюється стан після події;
чи правильне початкове значення;
чи оновлюється конкретний екземпляр компонента;
чи не змінюється стан іншого компонента випадково.
Кожен екземпляр ProductCard має власний стан. Якщо збільшити кількість клавіатур, кількість миші не повинна змінитися.
React Developer Tools показує хуки компонента. У прикладі можна побачити:
useState зі значенням quantity;
useMemo із обчисленим значенням total.
Це особливо корисно для компонентів із кількома хуками. За допомогою DevTools можна перевірити, чи містить компонент очікувані значення під час конкретного стану застосунку.
Назви хуків і спосіб їх відображення можуть трохи відрізнятися залежно від версії React і React Developer Tools.
Якщо ви бачите неправильний елемент безпосередньо на сторінці, не обов’язково шукати його вручну в дереві компонентів.
У React Developer Tools є інструмент вибору компонента на сторінці. Після його активації наведіть курсор на потрібний елемент і натисніть на нього. DevTools вибере відповідний React-компонент у вкладці Components.
Це зручно, коли:
дерево компонентів велике;
назва компонента невідома;
потрібно швидко перейти від елемента інтерфейсу до його React-коду;
потрібно перевірити props конкретного елемента.
Звичайні інструменти браузера показують HTML-елемент, наприклад button або div. React Developer Tools допомагає перейти від цього DOM-елемента до компонента React, який його створив.
У великих застосунках дерево компонентів може бути дуже об’ємним. Використовуйте поле пошуку у вкладці Components, щоб знайти компонент за назвою.
Наприклад, введіть:
ProductCardDevTools залишить або виділить компоненти, назва яких відповідає пошуковому запиту.
Пошук допомагає швидко перейти до потрібного компонента замість ручного перегляду всього дерева.
Під час налагодження важливо знати, які компоненти повторно рендеряться.
У DevTools можна ввімкнути підсвічування оновлень компонентів. Після цього змінені або повторно відрендерені частини інтерфейсу короткочасно виділяються.
Для перевірки прикладу:
Увімкніть підсвічування оновлень.
Натисніть Додати в першому ProductCard.
Подивіться, які компоненти оновилися.
Повторіть дію для другого товару.
Цей підхід допомагає помітити зайві оновлення. Наприклад, зміна кількості одного товару не повинна без потреби змінювати всі картки.
Однак саме повторне рендерення не завжди є помилкою. Компонент може повторно виконатися, але це не обов’язково означає проблему з продуктивністю. Важливо оцінювати, чи є такі оновлення зайвими та дорогими.
Вкладка Profiler призначена для аналізу продуктивності React-компонентів.
Базовий сценарій:
Відкрийте вкладку Profiler.
Натисніть кнопку запису.
Виконайте дію в застосунку, наприклад збільште кількість товару.
Зупиніть запис.
Перегляньте компоненти, які рендерилися під час цієї дії.
Profiler показує інформацію про рендеринг у вибраному проміжку часу. Він допомагає відповісти на запитання:
який компонент був оновлений;
яка дія спричинила оновлення;
які компоненти рендеряться найдовше;
чи оновлюються компоненти, які не повинні були змінюватися.
Профілювання краще виконувати на сценаріях, які дійсно повільні для користувача. Не варто оптимізувати компонент лише через те, що він повторно рендериться.
Якщо компонент працює неправильно, використовуйте послідовність:
Відкрийте вкладку Components.
Знайдіть компонент, який відповідає проблемній частині інтерфейсу.
Перевірте його props.
Перевірте значення state і хуків.
Виконайте дію, після якої виникає проблема.
Перевірте, які значення змінилися.
Перевірте батьківський компонент, якщо дані вже спочатку неправильні.
Використайте Profiler, якщо проблема пов’язана з повільним оновленням.
Наприклад, якщо сума в ProductCard неправильна:
перевірте quantity;
перевірте значення total;
перевірте, чи змінюється стан після натискання кнопки;
перевірте залежності useMemo;
переконайтеся, що вибрано потрібний екземпляр ProductCard.
React Developer Tools має налаштування, які допомагають зробити дерево компонентів зручнішим для роботи.
Залежно від версії інструмента можна:
приховувати компоненти за назвою;
змінювати спосіб відображення дерева;
фільтрувати технічні компоненти;
налаштовувати підсвічування оновлень;
переглядати додаткові дані для вибраного компонента.
У великих проєктах корисно приховувати компоненти-обгортки та залишати в дереві ті компоненти, з якими ви безпосередньо працюєте.
React Developer Tools найзручніше використовувати під час розробки локального застосунку.
У продакшен-застосунку можливості інструмента можуть бути обмежені. Крім того, доступність даних залежить від того, як саме зібраний і запущений застосунок.
Не слід використовувати DevTools як єдиний спосіб захисту даних. Значення props, стану та інша інформація, доступна компоненту на клієнті, потенційно може бути переглянута користувачем.
Переконайтеся, що:
відкрито саме сторінку React-застосунку;
застосунок успішно запустився;
розширення активне;
DevTools було відкрито після завантаження сторінки;
сторінка не містить лише статичний HTML без React.
Іноді допомагає перезавантаження сторінки після відкриття DevTools.
На сторінці може бути кілька екземплярів одного компонента. Наприклад, у прикладі є дві ProductCard.
Вибирайте компонент за конкретним значенням props, наприклад за name, щоб переконатися, що досліджуєте правильний екземпляр.
У деяких версіях DevTools можна тимчасово змінювати значення props або state для перевірки поведінки компонента. Такі зміни призначені для експерименту під час налагодження.
Вони не замінюють виправлення коду. Після перезавантаження сторінки значення знову буде встановлено програмою.
Якщо ProductCard отримав неправильний name, проблема може бути в App, а не в самому ProductCard.
Перевіряйте дані по ланцюжку:
стан або джерело даних;
батьківський компонент;
передані props;
дочірній компонент;
відображення значень у JSX.
Порожній або дуже короткий запис Profiler не дасть корисної інформації. Записуйте конкретну дію, яка відтворює проблему: введення тексту, відкриття меню, фільтрацію чи оновлення списку.
React Developer Tools — розширення для налагодження React-застосунків.
Вкладка Components показує дерево React-компонентів.
Для вибраного компонента можна переглянути props, state і хуки.
Інструмент вибору на сторінці допомагає швидко знайти компонент за DOM-елементом.
Підсвічування оновлень допомагає помітити повторні рендеринги.
Вкладка Profiler використовується для аналізу продуктивності.
Під час налагодження перевіряйте дані від батьківського компонента до дочірнього.
Тимчасові зміни значень у DevTools не замінюють виправлення коду.