11. diel - Debugovanie React Native aplikácií
V minulej lekcii, Aplikácia ToDo - Navigácia a dokončenie , sme vytvorili vzhľad našej aplikácie a naučili sa pracovať s navigáciou.
V nasledujúcom tutoriále vývoja multiplatformných mobilných aplikácií v React Native sa zameriame na debugovanie aplikácie pomocou Chrome DevTools, React DevTools a neminie nás ani debugovanie priamo vo Visual Studio Code.
Debugovanie s Chrome DevTools
Rovnako ako pri webových stránkach pomocou Chrome DevTools (slovensky sa im hovorí Vývojárske nástroje) získavame prehľad o JavaScript kóde aplikácie. S týmto nástrojom máme prístup ku kartám ako je Console, Source či Network. Chrome DevTools máme k dispozícii v akejkoľvek aplikácii využívajúcej Hermes (JavaScript engine optimalizovaný pre React Native). Nástroje otvoríme kliknutím pravým tlačidlom myši na stránku a výberom možnosti Preskúmať (Inspect), či Revízia prvku. Rôzne prehliadače to bohužiaľ majú pomenované každý inak. Obvykle sa ale držia rovnaké klávesové skratky. Klávesová skratka je na Windows Ctrl + Shift + I a na MacOS Command + Option + I. Na debugging si založíme samostatný projekt. V pracovnej zložke otvoríme terminál a vytvoríme novú aplikáciu Debugging a spustíme ju:
Bežiacu aplikáciu v
termináli ponecháme pred voľbou Expo go. Presunieme sa do IDE,
kde otvoríme zložku aplikácie Debugging/ a otvoríme súbor
App.js. Na ukážku debuggingu použijeme nasledujúci kód,
ktorým nahradíme kód v App.js:
...koniec náhľadu článku...
Pokračuj ďalej
Došiel si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiovej sekcie.
ročné PREDPLATNÉ
44 €
mesačne, platené ročne (528 €)14 000+ lekcií, cvičení a testov
6 000+ ti zostane navždy
Neobmedzený prístup ku všetkým aktuálnym
aj pripravovaným kurzom.
Kúpiť iba tento kurz
Získaj okamžitý prístup ku kurzu bez
časového obmedzenia.
20 €
Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš s Prevádzkovými podmienkami.
- Prístup k jednotlivým lekciám podľa spôsobu obstarania.
- Kvalitné znalosti v oblasti IT.
- Zručnosti, ktoré ti pomôžu získať vysnívanú a dobre platenú prácu.
Popis článku
Požadovaný článok má nasledujúci obsah:
V tutoriále React Native sa naučíme debugovať aplikáciu pomocou Chrome DevTools, React DevTools ale aj priamo vo Visual Studio Code.
