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