Тема: Налагодження коду (Debugging). Використання React DevTools та точок зупинки (breakpoints) у браузері для пошуку помилок у стані, властивостях та допущених логічних неточностей під час рендеру.
Мета: Навчитися виявляти та усувати логічні помилки у React-додатках без використання застарілого методу console.log; опанувати роботу з розширенням React Developer Tools для інспектування стану (state) та виявлення проблем рендеру; навчитися ставити точки зупинки (Breakpoints) у вкладці Sources браузера для покрокового виконання та пошуку “невидимих” багів.
Необхідні інструменти: Браузер (Google Chrome або Edge), встановлене офіційне розширення [React Developer Tools], локально запущений проєкт з попередніх лабораторних/практичних робіт (npm run dev), редактор VS Code.
State (на прикладі лічильника лайків).key).Якщо у вас немає готової “Стрічки новин” з попередніх занять, створіть (або оновіть) два файли, щоб мати базу для виконання сьогоднішньої роботи.
src/components/Post.jsx
import { useState } from "react";
function Post({ id, title, content, author }) {
const [likes, setLikes] = useState(0);
const handleLike = () => {
// Тут ми зробимо помилку у завданні №2
setLikes(likes + 1);
};
return (
<div style=>
<h3>{title}</h3>
<p>{content}</p>
<small>Автор: {author}</small>
<br />
<button onClick={handleLike}>Like ({likes})</button>
</div>
);
}
export default Post;
src/components/Feed.jsx
import { useState } from "react";
import Post from "./Post";
const mockPosts = [
{
id: 1,
title: "Вивчаємо React",
content: "Основи компонентів.",
author: "Іван",
},
{
id: 2,
title: "Хуки у React",
content: "UseState та UseEffect - це важливо.",
author: "Petro",
},
];
const Feed = () => {
const [searchTerm, setSearchTerm] = useState("");
const filteredPosts = mockPosts.filter((post) => {
const matchesSearch =
post.content.toLowerCase().includes(searchTerm.toLowerCase()) ||
post.author.toLowerCase().includes(searchTerm.toLowerCase());
return matchesSearch;
});
return (
<div>
<h2>Стрічка новин</h2>
<input
type="text"
placeholder="Пошук..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<div>
{filteredPosts.length > 0 ? (
filteredPosts.map((post) => <Post key={post.id} {...post} />)
) : (
<p>Нічого не знайдено за вашим запитом.</p>
)}
</div>
</div>
);
};
export default Feed;
Для інспектування React-компонентів можна використовувати два підходи:
Якщо браузерне розширення конфліктує з іншими розширеннями або ви тестуєте мобільний вигляд:
npm install -g react-devtoolsreact-devtools (відкриється окреме вікно).index.html у корневій теці вашого проєкту.<head> перед іншими тегами:
<script src="http://localhost:8097"></script>
У будь-якому з варіантів (після відкриття F12 або автономного вікна) ви отримаєте доступ до двох нових вкладок: ⚛️ Components та ⚛️ Profiler.
Перейдіть у вкладку Components. Вона показує поточну ієрархію React-компонентів, наприклад:
App -> MainLayout -> Feed -> Post.
Уявімо ситуацію: розробник помилився при оновленні лічильника лайків у компоненті Post. Візуально текст додається дивним чином (наприклад, 01, 011).
Замість додавання console.log:
Feed).Post у дереві. У правій панелі знайдіть розділ hooks -> State.0 (Number). Натисніть кнопку “Лайк” на сторінці.State зміниться на "01" (String).
Висновок: DevTools миттєво підказує, що операція додавання перетворилася на конкатенацію рядків.
Виправлення: у коді компонента необхідно змінити setLikes(likes + '1') на setLikes(likes + 1).Для забезпечення продуктивності React вимагає унікальні key для списків. Уявімо в Feed.jsx такий фрагмент:
// Навмисна помилка: хардкодований ключ для всього масиву
filteredPosts.map((post) => (
<div key="duplicate-key" style=>
<Post {...post} />
</div>
));
Warning: Encountered two children with the same key, 'duplicate-key'.React DevTools (іконка шестірні -> General) увімкніть “Highlight updates when components render”."duplicate-key" на унікальний ідентифікатор, наприклад post.id.Що робити, якщо помилок у консолі немає, стан виглядає нормально, але функція не працює як очікується? Наприклад, пошук у стрічці новин завжди повертає “Нічого не знайдено”.
У Feed.jsx прихована така помилка (використання && замість ||):
// Логіка пошуку: вимагає одночасного збігу слова і в тексті, і в імені автора
const matchesSearch =
post.content.toLowerCase().includes(searchTerm.toLowerCase()) &&
post.author.toLowerCase().includes(searchTerm.toLowerCase());
Ctrl + P (або Cmd + P) і введіть Feed.jsx, щоб відкрити вихідний код компонента.const matchesSearch = ....post.content та searchTerm. DevTools покаже реальні значення змінних у пам’яті.&& вимагає цього слова і в імені автора (який, наприклад, “Іван”), змінна matchesSearch стає false.F10 (Step over), щоб бачити покроковий рух коду далі.Виправлення: заміна && (І) на || (АБО) миттєво лагодить пошук.
(Примітка: для швидкої зупинки коду можна написати debugger; прямо у файлі VS Code).
Profile.jsx або форму логіну).<button onClick={setLikes(likes + 1)}> замість передачі функції), зловіть помилку Too many re-renders і дослідіть стек виклику у консолі браузера.useEffect або обробник onClick) команду debugger;.key?