Debugování webových aplikací může být náročný úkol, zejména pokud jde o složité frameworky jako React. V této příručce ti ukážu, jak efektivně zvládnout debugování aplikací React pomocí nástrojů pro vývojáře Google Chrome. Zameřím se na konkrétní techniky, jak najít a opravit nejčastější chyby. Měl/a bys mít znalost Reactu, abys mohl/mohla pochopit tyto koncepty.
Nejdůležitější poznatky
- Porozuměj roli zdrojových map při debugování tvé React-App.
- Nastav si rozestupy na strategických místech, abys mohl/a sledovat průběh aplikace.
- Analýza zásobníku volání ti pomůže pochopit, které funkce jsou volány a kdy.
Krok za krokem - návod
Pro zahájení debugování jsem připravil jednoduchý příklad aplikace React, která poskytuje dva tlačítka k zvýšení počtu. Chceme se ujistit, že stav aplikace je správně aktualizován.
Nejprve otevři nástroje vývojáře v Chrome. Můžeš tak učinit kliknutím pravým tlačítkem myši na stránku a vybráním možnosti "Zkontrolovat" nebo stisknutím klávesy "F12".
V prvním kroku znovu načti svou React-App, abys se ujistil/a, že pracuješ s aktuálním stavem. Po načtení aplikace uvidíš dvě tlačítka pro počítání. První tlačítko zvýší první čítač a druhé tlačítko druhý čítač.
Při kliknutí na tlačítka uvidíš, že hodnoty čítačů se zvyšují. Tyto zvýšené hodnoty můžeš kontrolovat v konzoli, kterou najdeš také v nástrojích pro vývojáře. Pro zobrazení nebo skrytí konzole dvakrát stiskni "Escape".
V dalším kroku upravíš kód své aplikace, zejména UseEffect Hook. UseEffect Hook se používá pro zpracování vedlejších efektů v Reactu. V mém příkladu jsem ho nastavil tak, aby vypsala aktuální hodnotu čítače do konzole. Tím zajistíš, že porozumíš, jak často je tento efekt spouštěn.
Pomocí konzole můžeš sledovat kód a zkontrolovat, zda jsou hodnoty správně vypsány. Pokud však nezadáš správně pole závislostí v UseEffect, může to vést k neočekávanému chování.
Pro otestování odeber pole závislostí na okamžik a sleduj, co se stane. Nyní můžeš nastavit rozestupy. K tomu klikni na číslo v levém sloupci, abys vytvořil/a bod zastavení (breakpoint).
Nyní klikni na první tlačítko a sleduj, jak se provedení zastaví u nastaveného bodu zastavení. Tímto způsobem můžeš analyzovat stav aplikace během provádění obslužné rutiny kliku.
Zjistíš, že s každým klikem se stav aktualizuje pouze pro tlačítko, na které bylo kliknuto. Pokud však klikneš na druhé tlačítko, uvidíš, že chování aplikace není tak, jak by sis představoval/a.
Nyní začni zkoumat chybu. Zjistíš, že UseEffect vždy vypisuje stávající hodnotu čítače, i když klikneš na druhý čítač.
Zde bys měl/měla zase přidat pole závislostí a ujistit se, že obsahuje aktuální hodnotu čítače jako závislost. Tím se zajistí, že se efekt spustí pouze tehdy, když se změní příslušný čítač.
Pokud znovu načteš aplikaci a klikneš na tlačítka, uvidíš, že výstup konzole je vypsán pouze při změně čítače. Přidej do své konzoleové.Log instrukce další rozestup (breakpoint) a zkontroluj, zda jsou vypsány očekávané hodnoty.
Dej pozor, že v kódu React je také možnost Zobrazit ignorované rámce. Tato možnost může být užitečná k tomu, aby se zabránilo zobrazení kódů příslušné knihovny ve zásobníku volání, což by mohlo narušit tvou analýzu.
Po opravě chyby může být užitečné ji zkontrolovat znovu. Zde by sis měl zajistit, že kód je opět testován ve funkčnosti tlačítka, aby se potvrdilo, zda změna má požadovaný efekt.
Dále můžeš strategicky nastavit breakpointy na různých místech v kódu, abys mohl dále zkoumat volání funkcí. Pravidelně kontrolovaný zásobník volání ti pomůže sledovat všechny volané funkce, které byly volány v určitém okamžiku.
Dej si pozor, že asynchronní operace mohou vést ke ztrátě lokálního stavu, proto je důležité pravidelně kontrolovat zásobník volání, abys mohl udržet přehled o stavu své React aplikace.
Shrnutí
V tomto tutoriálu jsi se naučil, jak důležité jsou Chrome Developer Tools pro efektivní ladění aplikací v Reactu. Nastavování breakpointů a analýza zásobníku volání jsou zásadní kroky pro pochopení toku tvého kódu a řešení problémů. Správným řízením závislostí v UseEffect můžeš zajistit, že tvá aplikace zobrazuje očekávaný stav.
Často kladené dotazy
Co je breakpoint?Breakpoint je bod v kódu, kde se běh programu zastaví pro prozkoumání aktuálního provádění.
Jak používám pole závislostí v UseEffect?Pole závislostí ti umožňuje určit, které proměnné mají spouštět efekt, pokud se změní.
Co jsou Source Maps?Source Maps spojují komprimovaný a transpilovaný kód s původním kódem, což usnadňuje ladění.
Jak sleduji asynchronní operace ve zásobníku volání?Dej pozor, že asynchronní volání pomocí funkce SetTimeout nebo Promises ovlivňují stav aplikace a mohou vést k nedostupnosti lokálních proměnných v určitém okamžiku.
