Põhjalik juhend reaalajas siluri installimiseks Expo rakendusse

[Uuendatud 20. märtsil 2019]

React Native Silur on React Native rakenduste silumise püha graal, kuna see ühendab Chrome Devtools, React Devtools ja Redux Devtools kõik ühes aknas.

Siin esitan juhised React Native Debuggeri installimiseks Expo rakendusse.

[Kiirjuhend]

  • Laadige väljastuslehelt alla React Native Siluri.
  • Uue akna avamiseks ja pordi väärtuseks 19001 klõpsake avage silur, ⌘ + t.
  • npm käivitage expo rakendus, avage arendaja menüü, lubage „Debug JS Remotey”.
  • Seadistage „__REDUX_DEVTOOLS_EXTENSION__” nagu näidatud siin.

Tõenäoliselt peaks see töötama!

Kui teil on küsimusi või soovite teada veel mõnda näpunäidet, lugege järgmist põhjalikku juhendit.

  1. Installige React Native Silur

React Native Debuggeri installimiseks saate selle alla laadida väljalaske lehelt.

MacOS-i puhul saate Homebrew abil installida:

$ brew update && brew cask install react-native-debugger

2. Käivitage reaalajas silur

Natiivse siluri käivitamiseks klõpsake käsul rakenduse avamine.

MacOS-i puhul saate kasutada CLI-skripti.

$ avatud 'rndebugger: // set-debugger-loc? host = localhost & port = 19001'

Pordi väärtuseks on seatud 19001, kuna Expo metroo-müüja seda porti kasutab. Kui klõpsate rakenduse käsitsi klõpsamisel, siis seatakse pordi väärtuseks 8081, kuna see on vaikesäte React Native Debuggeris.

Teise pordi seadmiseks vajutage ⌘ + t, et avada uus aken, kus saate lähtestada pordi Expo metroojaama pordiks (vaikimisi 19001).

3. Käivitage rakendus Expo ja siluge JS eemalt

npm dollari algus

Avage rakendus, avage arendaja menüü, seejärel lubage „Debug JS Remotely“. Nüüd peaksid kroomiarendaja tööriistad olema ühendatud.

Arendaja menüü avamiseks “raputage” Expo kliendiga, “⌘ + d” iOS-i simulaatoriga, “⌘ + m” Androidi emulaatoriga.

MacOS-i mugavuse huvides võite 2. ja 3. sammu mähkida selliseks skriptiks.

4. React Devtools seadistamine

Kui kasutate klienti Expo (reaalne seade WiFi kaudu), väidavad dokumendid, et võib olla vajalik täiendav samm.

Otsige üles fail setupDevtools.js aadressil node_modules / react-native / Libraries / Core / Devtools / setupDevtools.js.

Nüüd tuleb funktsioonile „connectToDevTools” edastatud atribuut „host” muuta teie kohalikule IP-aadressile nagu allpool.

(Siit leiate oma kohaliku IP-aadressi)

(Teil on vaja oma “kohalikku” IP-aadressi, mitte “avalikku” IP-d. See, mille saate googeldades, mis on minu IP? On avalik IP)

Reaktiivsed pühendused peaksid nüüd käima minema!

5. Redux Devtoolide seadistamine

Kuna aken .__ REDUX_DEVTOOLS_EXTENSION__ on juba ette nähtud, saate tavalise tantsuga lisada redux-detoolid.

või kui kasutate muid vahetarkvara,

See teeb triki!

React Native Debuggeri eelmistes versioonides polnud reduxi devtoolid karbist välja lisatud. Sellistel juhtudel,

$ npm i redux-devtools-extension

Siis

Jällegi, kui kõik on korda läinud, peaksite midagi sellist nägema.

P.S Võrgutaotluste logimiseks paremklõpsake jaotisel React Devtools või Redux Devtools ja klõpsake nuppu Luba võrgukontroll!

Lootsin, et teile meeldis! Võtke minuga ühendust GitHubis!