IT rekvalifikácia. Seniorní programátori zarábajú až 6 000 €/mesiac a rekvalifikácia je prvým krokom. Zisti, ako na to!

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

Vedomosti v hodnote stoviek tisíc získaš za pár korún

Minul 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émiové sekcie.

Kúpiť tento kurz

Kúpiť všetky aktuálne dostupné lekcie s funkciou odovzdávanie úloh iba za 500 kreditov
Aktuálny stav konta 0 kreditov
Kúpou tohoto balíčku získaš prístup ku všetkým 29 článkom (29 lekcií) tohoto kurzu.

Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš so zmluvnými podmienkami.

Čo od nás v ďalších lekciách dostaneš?
  • Neobmedzený a trvalý prístup k jednotlivým lekciím.
  • 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.

Kredity získaš, keď podporíš našu sieť. To môžeš urobiť buď zaslaním symbolickej sumy na podporu prevádzky alebo pridaním obsahu na sieť.

Článok pre vás napísal Štěpán Kraus
Avatar
Aktivity