En grundig guide til at installere React Native Debugger til en Expo-app

[Opdateret 20. marts, 2019]

React Native Debugger er den hellige gral ved debugging React Native-applikationer, da den kombinerer Chrome Devtools, React Devtools og Redux Devtools alt i ét vindue.

Her præsenterer jeg trinnene til at installere React Native Debugger til en Expo-app.

[Hurtig vejledning]

  • Download React Native Debugger fra udgivelsessiden.
  • Klik på åbn debuggeren, ⌘ + t for at åbne nyt vindue og indstil port til 19001.
  • npm start expo-app, åbn Developer-menuen, aktiver "Debug JS eksternt."
  • Opsætning "__REDUX_DEVTOOLS_EXTENSION__" som vist her.

Det burde sandsynligvis virke!

Hvis du har problemer eller vil vide nogle flere tip og tricks, skal du læse følgende detaljerede vejledning.

  1. Installer React Native Debugger

Hvis du vil installere React Native Debugger, kan du downloade den fra udgivelsessiden.

For MacOS kan du bruge Homebrew til at installere:

$ brygningsopdatering && bryg caskinstallation react-native-debugger

2. Start React Native Debugger

For at starte React Native Debugger skal du manuelt klikke på åbn appen.

For MacOS kan du bruge et CLI-script som dette.

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

Porten er indstillet til 19001, da Expos metrobundter bruger denne port. Når du manuelt klikker på åbn appen, indstilles porten til 8081, da det er standardindstillingen i React Native Debugger.

For at indstille til en anden port, skal du trykke på ⌘ + t for at åbne et nyt vindue, hvor du kan nulstille porten til Expos metro bundler-port (standard 19001).

3. Start Expo-appen og fejlsøg JS eksternt

Start af $ npm

Åbn din app, åbn Developer-menuen, og aktiver derefter "Debug JS eksternt". Nu skal Chrome-værktøjet tilsluttes.

I tilfælde af at "åbne" med Expo-klienten, "⌘ + d" med iOS-simulator, "⌘ + m" med Android-emulator for at åbne udviklermenuen.

For nemheds skyld i MacOS kan du pakke trin 2 og 3 til et script som dette.

4. Opsætning af React Devtools

Hvis du bruger Expo-klient (ægte enhed via Wi-Fi), angiver Docs, at et ekstra trin kan være nødvendigt.

Find filen setupDevtools.js på node_modules / react-native / Biblioteker / Core / Devtools / setupDevtools.js.

Nu skal egenskaben "vært", der sendes til funktionen "connectToDevTools", ændres til din lokale IP-adresse som nedenfor.

(Tjek din lokale IP-adresse her)

(Du har brug for din "lokale" IP-adresse, ikke den "offentlige" IP. Den, du får ved at google, hvad er min ip? Er den offentlige IP)

React devtools skal nu køre!

5. Opsætning af Redux Devtools

Da vindue .__ REDUX_DEVTOOLS_EXTENSION__ allerede er til rådighed, kan du inkludere redux devtools med den sædvanlige dans.

eller hvis du bruger andre midwares,

Dette vil gøre det trick!

I de tidligere versioner af React Native Debugger var redux devtools ikke inkluderet i boksen. I sådanne tilfælde,

$ npm i redux-devtools-udvidelse

Derefter,

Igen, hvis alt er gået i orden, skal du se noget lignende.

P.S For at logge netværksanmodninger skal du højreklikke på afsnittet React Devtools eller Redux Devtools og klikke på Enable Network Inspect!

Håbede du kunne lide det! Opret forbindelse med mig på GitHub!