Átfogó útmutató a React natív hibakereső telepítéséhez egy Expo alkalmazáshoz

[Frissítve 2019. március 20-án]

A React Native Debugger a React Native alkalmazások hibakeresésének szent graálja, mivel egyetlen ablakban ötvözi a Chrome Devtools, React Devtools és Redux Devtools eszközöket.

Itt bemutatom a React Native Debugger telepítésének lépéseit az Expo alkalmazásba.

[Gyors útmutató]

  • Töltse le a React Native Debugger terméket a kiadási oldalról.
  • Az új ablak megnyitásához és a port 19001-re állításához kattintson a Debugger, ⌘ + t gombra.
  • npm indítsa el az expo alkalmazást, nyissa meg a Fejlesztő menüt, engedélyezze a „JS távoli hibakeresése” lehetőséget.
  • Az itt látható módon állítsa be a „__REDUX_DEVTOOLS_EXTENSION__” beállítást.

Valószínűleg ,, működni kell!

Ha bármilyen kérdése van, vagy további tippeket szeretne tudni, olvassa el a következő részletes útmutatót.

  1. Telepítse a React Natív Hibakeresőt

A React Native Debugger telepítéséhez letöltheti a kiadási oldalról.

MacOS esetén a Homebrew segítségével telepítheti:

$ brew frissítés && brew cask telepítése a react-native-debugger alkalmazáshoz

2. Indítsa el a React natív hibakeresőt

A React Native Debugger elindításához kézzel kattintson az alkalmazás megnyitására.

MacOS esetén egy ilyen CLI szkriptet használhat.

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

A port 19001-re van állítva, mivel az Expo metrócsomagolója ezt a portot használja. Amikor azonban az alkalmazás megnyitására manuálisan kattint, a port 8081-re lesz beállítva, mivel ez az alapértelmezett beállítás a React Native Debugger alkalmazásban.

Egy másik port beállításához nyomja meg a ⌘ + t gombot, hogy új ablakot nyisson meg, ahol visszaállíthatja a portot az Expo metrócsomagolójának portjára (alapértelmezett 19001).

3. Indítsa el az Expo alkalmazást, és távolítsa el a JS-t

$ npm indulás

Nyissa meg az alkalmazást, nyissa meg a Fejlesztő menüt, majd engedélyezze a „Debug JS Remotely” lehetőséget. Most a krómfejlesztő eszközöket csatlakoztatni kell.

Abban az esetben, ha megnyitja a fejlesztői menüt, “rázza” az Expo klienssel, “⌘ + d” iOS szimulátorral, “⌘ + m” az Android emulátorral.

A MacOS kényelme érdekében a 2. és a 3. lépést egy ilyen szkriptbe csomagolhatja.

4. A React Devtools beállítása

Ha Expo klienst használ (valós eszköz Wi-Fi-n keresztül), a Dokumentumok azt állítják, hogy további lépésre lehet szükség.

Keresse meg a setupDevtools.js fájlt a node_modules / react-native / Libraries / Core / Devtools / setupDevtools.js mappában.

Most, hogy az „connectToDevTools” funkcióhoz átadott „host” tulajdonságot az alábbiak szerint kell megváltoztatni a helyi IP-címre.

(Nézze meg a helyi IP-címet itt)

(Szüksége van a „helyi” IP-címre, nem pedig a „nyilvános” IP-re. Amit kapsz, miközben googlálod, mi az én ip ?, az nyilvános IP)

A React devtoolsnak most futnia kell!

5. A Redux Devtools beállítása

Mivel a .__ REDUX_DEVTOOLS_EXTENSION__ ablak már rendelkezésre áll, a redux devtoolokat a szokásos tánccal beillesztheti.

vagy ha más közvetítőket használ,

Ez meg fogja csinálni a trükköt!

A React Native Debugger korábbi verzióiban a redux devtools nem volt a dobozban. Ilyen esetekben,

$ npm i redux-devtools-kiterjesztés

Azután,

Ismét, ha minden rendben van, látnod kell valamit ilyesmit.

P.S A hálózati kérelmek naplózásához kattintson a jobb gombbal a React Devtools vagy a Redux Devtools szakaszra, majd kattintson a Hálózati ellenőrzés engedélyezése lehetőségre!

Remélem, tetszett neki! Lépjen kapcsolatba velem a GitHub-on!