React DevTools 🔧
React DevTools je nepostradatelný nástroj pro debugging React aplikací. Umožňuje nám zkoumat komponenty, jejich stav, props a výkon v reálném čase.
🎯 Co jsou React DevTools?
React DevTools je rozšíření prohlížeče, které poskytuje vývojářům nástroje pro debugging React aplikací přímo v prohlížeči.
Funkce:
✅ Zkoumání komponent - strom komponent, props, state
✅ Profiler - analýza výkonu a re-renderů
✅ Hooks debugging - zkoumání hooků a jejich stavu
✅ Time travel - návrat k předchozím stavům
✅ Component search - vyhledávání komponent
🚀 Instalace
Chrome/Edge:
- Otevřete Chrome Web Store
- Vyhledejte “React Developer Tools”
- Klikněte “Add to Chrome”
Firefox:
- Otevřete Firefox Add-ons
- Vyhledejte “React Developer Tools”
- Klikněte “Add to Firefox”
Safari:
- Otevřete Safari Extensions
- Vyhledejte “React Developer Tools”
- Nainstalujte rozšíření
🔍 Základní použití
1. Components tab
Po instalaci se v Developer Tools objeví nové záložky:
- Components - zkoumání komponent
- Profiler - analýza výkonu
// Příklad komponenty pro debugging
const EmployeeCard = ({ employee, onClick, isSelected }) => {
const [isHovered, setIsHovered] = useState(false);
return (
<div
className={`employee-card ${isSelected ? 'selected' : ''}`}
onClick={onClick}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<h3>{employee.name}</h3>
<p>{employee.position}</p>
<span>{employee.department}</span>
</div>
);
};Zkoumání komponent:
- Otevřete DevTools (F12)
- Přejděte na záložku Components
- Klikněte na komponentu ve stromu komponent
- Zkoumejte props a state v pravém panelu
2. Props a State
V panelu Properties můžete vidět:
- Props - všechny props předané komponentě
- Hooks - stav všech hooků
- State - lokální state komponenty
- Context - hodnoty z Context API
🎨 Profiler
Analýza výkonu:
- Otevřete záložku Profiler
- Klikněte na Record (červené tlačítko)
- Interagujte s aplikací
- Klikněte na Stop
- Zkoumejte výsledky
Co profiler ukazuje:
- Render time - čas potřebný pro render
- Re-renders - které komponenty se re-renderovaly
- Why did this render? - důvod re-renderu
- Component tree - vizualizace renderování
// Komponenta s performance problémy
const ExpensiveComponent = ({ data }) => {
// Těžký výpočet při každém renderu
const expensiveValue = useMemo(() => {
return data.reduce((sum, item) => sum + item.value, 0);
}, [data]);
return <div>{expensiveValue}</div>;
};🔧 Pokročilé funkce
1. Component search
// Vyhledávání komponent podle názvu
// V DevTools můžete vyhledat "EmployeeCard" nebo "EmployeeList"2. Time travel debugging
// Komponenta s časovou funkcí
const Timer = () => {
const [time, setTime] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setTime(prev => prev + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return <div>Time: {time}</div>;
};3. Hooks debugging
// Komponenta s různými hooky
const ComplexComponent = () => {
const [state, setState] = useState(0);
const [data, setData] = useState(null);
const memoizedValue = useMemo(() => {
return state * 2;
}, [state]);
const callback = useCallback(() => {
setState(prev => prev + 1);
}, []);
useEffect(() => {
// Side effect
}, [state]);
// V DevTools uvidíte všechny hooky a jejich hodnoty
return <div>{memoizedValue}</div>;
};🐛 Debugging techniky
1. Console logging
const EmployeeCard = ({ employee, onClick }) => {
console.log('EmployeeCard rendered:', employee);
useEffect(() => {
console.log('EmployeeCard mounted');
return () => {
console.log('EmployeeCard unmounted');
};
}, []);
return (
<div onClick={onClick}>
<h3>{employee.name}</h3>
</div>
);
};2. Breakpoints v komponentách
const EmployeeCard = ({ employee, onClick }) => {
// Můžete nastavit breakpoint zde
debugger; // Zastaví execution
return (
<div onClick={onClick}>
<h3>{employee.name}</h3>
</div>
);
};3. Conditional rendering debugging
const EmployeeList = ({ employees, filter }) => {
const filteredEmployees = employees.filter(emp =>
filter === 'all' || emp.department === filter
);
// Debug v DevTools
console.log('Filter:', filter);
console.log('All employees:', employees);
console.log('Filtered employees:', filteredEmployees);
return (
<div>
{filteredEmployees.map(employee => (
<EmployeeCard key={employee.id} employee={employee} />
))}
</div>
);
};🚀 Tipy a triky
1. Named components pro lepší debugging
// ✅ Dobře - pojmenovaná komponenta
const EmployeeCard = ({ employee }) => {
return <div>{employee.name}</div>;
};
// ❌ Špatně - anonymní komponenta
const EmployeeCard = ({ employee }) => {
return <div>{employee.name}</div>;
};
// V DevTools uvidíte "EmployeeCard" místo "Anonymous"2. Display name pro HOC
const withLoading = (Component) => {
const WrappedComponent = (props) => {
if (props.loading) {
return <div>Loading...</div>;
}
return <Component {...props} />;
};
WrappedComponent.displayName = `withLoading(${Component.displayName || Component.name})`;
return WrappedComponent;
};3. React.memo pro performance
const EmployeeCard = React.memo(({ employee, onClick }) => {
return (
<div onClick={onClick}>
<h3>{employee.name}</h3>
</div>
);
});
// V Profileru uvidíte, kdy se komponenta re-renderuje📋 Praktické cvičení
- Nainstalujte React DevTools ve vašem prohlížeči
- Otevřete aplikaci se seznamem zaměstnanců
- Zkoumejte komponenty v Components tab
- Spusťte Profiler a analyzujte výkon
- Přidejte console.log pro debugging
- Identifikujte performance problémy pomocí Profileru
🔧 Troubleshooting
DevTools se nezobrazují:
- Zkontrolujte, zda je aplikace v development módu
- Restartujte prohlížeč
- Zkontrolujte, zda je rozšíření aktivní
Profiler nefunguje:
- Ujistěte se, že používáte React 16.5+
- Zkontrolujte, zda je aplikace v development módu
- Restartujte DevTools
React DevTools jsou nezbytným nástrojem pro každého React vývojáře. V příští části se podíváme na Context API pro globální stav! 🚀