Lekce 11 - Debugování React Native aplikací
V minulé lekci, Aplikace ToDo - Navigace a dokončení, jsme vytvořili vzhled naší aplikace a naučili se pracovat s navigací.
V následujícím tutoriálu vývoje multiplatformních mobilních aplikací v React Native se zaměříme na debugování aplikace pomocí Chrome DevTools, React DevTools a nemine nás ani debugování přímo ve Visual Studio Code.
Debugování s Chrome DevTools
Pomocí Chrome DevTools (česky se jim říká vývojářské nástroje) získáváme přehled o JavaScript kódu aplikace stejně jako u webových stránek. S tímto nástrojem máme přístup ke kartám, jako je Console, Source či Network. Chrome DevTools máme k dispozici v jakékoli aplikaci využívající Hermes (JavaScript engine optimalizovaný pro React Native). Nástroje otevřeme kliknutím pravým tlačítkem myši na stránku a výběrem možnosti Prozkoumat (Inspect) či Revize prvku. Různé prohlížeče to bohužel mají pojmenované každý jinak. Obvykle se ale drží stejné klávesové zkratky. Klávesová zkratka je na Windows Ctrl + Shift + I a na MacOS Command + Option + I. Pro debugging si založíme samostatný projekt. V pracovní složce otevřeme terminál a vytvoříme novou aplikaci Debugging a spustíme ji:
Příprava projektu: npx create-expo-app Debugging cd Debugging npx expo start
Běžící aplikaci v terminálu ponecháme před volbou
Expo go. Přesuneme se do IDE, kde otevřeme složku aplikace
Debugging/ a otevřeme soubor App.js. Pro ukázku
debuggingu použijeme následující kód, kterým nahradíme kód v
App.js:
...konec náhledu článku...
Pokračuj dál
Došel jsi až sem a to je super! Věříme, že ti první lekce ukázaly něco nového a užitečného.
Chceš v kurzu pokračovat? Přejdi do prémiové sekce.
roční PŘEDPLATNÉ
1 082 Kč
měsíčně, placeno ročně (12 984 Kč)14 000+ lekcí, cvičení a testů
6 000+ ti zůstane napořád
Neomezený přístup ke všem aktuálním
i připravovaným kurzům.
Koupit pouze tento kurz
Získej okamžitý přístup ke kurzu bez
časového omezení.
475 Kč
Před koupí tohoto článku je třeba koupit předchozí díl
Obsah článku spadá pod licenci Premium, koupí článku souhlasíš s Provozními podmínkami.
- Přístup k jednotlivým lekcím dle způsobu pořízení.
- Kvalitní znalosti v oblasti IT.
- Dovednosti, které ti pomohou získat vysněnou a dobře placenou práci.
Popis článku
Požadovaný článek má následující obsah:
V tutoriálu React Native se naučíme debugovat aplikaci pomocí Chrome DevTools, React DevTools, ale i přímo ve Visual Studio Code.
