Una guia detallada per instal·lar React Native Debugger per a una aplicació Expo

[Actualitzat el 20 de març de 2019]

React Native Debugger és el més sagrat quan es depuren aplicacions React Native perquè combina Chrome Devtools, React Devtools i Redux Devtools en una finestra.

Aquí us presento els passos per instal·lar React Native Debugger per a una aplicació Expo.

[Guia d'inici ràpid]

  • Descarregueu React Native Debugger de la pàgina de llançament.
  • Feu clic a Obrir depurador, ⌘ + t per obrir una nova finestra i configurar el port a 19001.
  • npm start app expo, obriu el menú del desenvolupador i activeu "Debug JS de forma remota".
  • Configura "__REDUX_DEVTOOLS_EXTENSION__" com es mostra aquí.

El més probable és que hagi de funcionar!

Si teniu problemes o necessiteu més consells i consells, llegiu les instruccions detallades a continuació.

  1. Instal·leu React Native Debugger

Per instal·lar React Native Debugger, el podeu descarregar de la pàgina de llançament.

A MacOS, podeu utilitzar Homebrew per instal·lar:

$ Brew actualització i&w brew cask instal·len el depurador React-Native

2. Comença a reaccionar amb el depurador natiu

Per iniciar Reactiva el depurador nadiu, feu clic manualment a Obrir l'aplicació.

Podeu utilitzar un guió CLI per a MacOS.

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

El port es va establir en 19001, perquè el coordinador Expo Metro utilitza aquest port. Tanmateix, si feu clic manualment a Obrir l’aplicació, el port s’establirà a 8081, ja que aquesta és la configuració predeterminada de React Native Debugger.

Per configurar un port diferent, premeu un altre + t per obrir una finestra nova en la qual podeu restablir el port al port del paquet Expo-Metro (estàndard 19001).

3. Inicia l'aplicació Expo i depura JS de forma remota

$ npm inici

Obriu l'aplicació, obriu el menú de desenvolupadors i activeu "Debug JS de forma remota". Ara s’hauran de connectar les eines de desenvolupador de Chrome.

Per obrir el menú de desenvolupadors, heu de "sacsejar" amb el client Expo, amb el simulador iOS "⌘ + d" i amb l'emulador Android "⌘ + m".

A MacOS, podeu combinar els passos 2 i 3 en un script com aquest.

4. Configureu els Devtools de reacció

Si utilitzeu Expo-Client (dispositiu real mitjançant WLAN), els documents constaten que pot ser necessari un pas addicional.

Cerqueu el fitxer setupDevtools.js a node_modules / react-native / Libraries / Core / Devtools / setupDevtools.js.

Ara la propietat "host" passada a la funció "connectToDevTools" s'ha de canviar a la vostra adreça IP local, tal com es descriu a continuació.

(Consulteu la vostra adreça IP local aquí)

(Necessiteu la vostra adreça IP "local", no la IP "pública". La que obteniu de Googling és la meva IP. És la IP pública.)

Els devtools de reacció ara haurien de funcionar.

5. Configureu els dispositius Redux

Ja que la finestra .__ REDUX_DEVTOOLS_EXTENSION__ ja existeix, podeu integrar Redux Devtools amb el ball habitual.

o si utilitzeu un altre middleware,

Això farà el truc!

En versions anteriors de React Native Debugger, les eines de desenvolupament de Redux no es van incloure de manera predeterminada. En aquests casos

$ npm i redux-devtools-extension

Aleshores

Tot i que tot va bé, hauríeu de veure una cosa així.

PS Per registrar les sol·licituds de xarxa, feu clic amb el botó dret a la secció Reactar els dispositius o Redux Devtools i feu clic a Activa la inspecció de xarxa.

Espero que us hagi agradat! Connecta amb mi a GitHub.