Ένας λεπτομερής οδηγός για την εγκατάσταση του Reactive Native Debugger σε μια εφαρμογή Expo

[Ενημερώθηκε στις 20 Μαρτίου 2019]

Αντιμετωπίζετε το Native Debugger είναι το ιερό γραφικό του Debugging React Native εφαρμογές καθώς συνδυάζει τα Chrome Devtools, React Devtools και Redux Devtools όλα σε ένα παράθυρο.

Εδώ παρουσιάζω τα βήματα για να εγκαταστήσω το Reactive Native Debugger σε μια εφαρμογή Expo.

[Γρήγορος οδηγός]

  • Κάντε λήψη του React Native Debugger από τη σελίδα απελευθέρωσης.
  • Κάντε κλικ στο άνοιγμα του Debugger, ⌘ + t για να ανοίξετε νέο παράθυρο και να ρυθμίσετε τη θύρα στο 19001.
  • npm app εκκίνησης εκκίνησης, ανοίξτε το μενού Προγραμματιστής, ενεργοποιήστε το "Debug JS Remote".
  • Ρυθμίστε "__REDUX_DEVTOOLS_EXTENSION__" όπως φαίνεται εδώ.

Πιθανότατα, πρέπει να δουλεύει!

Αν έχετε προβλήματα ή θέλετε να μάθετε μερικές συμβουλές και κόλπα, διαβάστε τον παρακάτω σε βάθος οδηγό.

  1. Εγκαταστήστε το Reactive Native Debugger

Για να εγκαταστήσετε το Reactive Native Debugger, μπορείτε να το κατεβάσετε από τη σελίδα απελευθέρωσης.

Για το MacOS, μπορείτε να χρησιμοποιήσετε το Homebrew για εγκατάσταση:

Εργαλείο ανανέωσης μπύρας $ && δοχείο μπύρας εγκατάστασης αντιγράφων-native-debugger

2. Ξεκινήστε το Reactive Native Debugger

Για να ξεκινήσετε το Reactive Native Debugger, κάντε κλικ με το χέρι ανοίγοντας την εφαρμογή.

Για το MacOS, μπορείτε να χρησιμοποιήσετε μια δέσμη ενεργειών CLI όπως αυτή.

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

Η θύρα έχει οριστεί στο 19001, καθώς ο σταθμός metro της Expo χρησιμοποιεί αυτήν τη θύρα. Ωστόσο, όταν κάνετε κλικ με το χέρι ανοίγοντας την εφαρμογή, η θύρα θα ρυθμιστεί στο 8081, καθώς αυτή είναι η προεπιλεγμένη ρύθμιση του Reactive Native Debugger.

Για να ρυθμίσετε σε άλλη θύρα, πατήστε ⌘ + t για να ανοίξετε ένα νέο παράθυρο, όπου μπορείτε να επαναφέρετε τη θύρα στη θύρα του bundler του μετρό Expo (προεπιλογή 19001).

3. Εκκινήστε την εφαρμογή Expo και Debug JS Remote

$ npm start

Ανοίξτε την εφαρμογή σας, ανοίξτε το μενού Προγραμματιστής και, στη συνέχεια, ενεργοποιήστε το "Debug JS Remote". Τώρα πρέπει να συνδεθούν τα εργαλεία προγραμματισμού χρωμίου.

Σε περίπτωση που, για να ανοίξετε το μενού του προγραμματιστή, "κουνηθείτε" με τον πελάτη Expo, "⌘ + d" με προσομοιωτή iOS, "⌘ + m" με τον εξομοιωτή Android.

Για ευκολία στο MacOS, μπορείτε να ανασυστήσετε τα βήματα 2 και 3 σε ένα σενάριο όπως αυτό.

4. Ρύθμιση του React Devtools

Εάν χρησιμοποιείτε τον πελάτη Expo (πραγματική συσκευή μέσω Wi-Fi), τα Έγγραφα δηλώνουν ότι μπορεί να χρειαστεί ένα επιπλέον βήμα.

Βρείτε το αρχείο setupDevtools.js στο node_modules / react-native / Βιβλιοθήκες / Core / Devtools / setupDevtools.js.

Τώρα, η ιδιότητα "host" που πέρασε στη συνάρτηση "connectToDevTools" πρέπει να αλλάξει στην τοπική διεύθυνση IP σας όπως παρακάτω.

(Ελέγξτε την τοπική διεύθυνση IP σας εδώ)

(Χρειάζεστε την "τοπική" διεύθυνση IP σας, όχι την "δημόσια" IP.Αυτό που παίρνετε από googling τι είναι το ip μου είναι η δημόσια IP)

Αντιδράστε τα devtools πρέπει τώρα να τρέχουν!

5. Εγκατάσταση Redux Devtools

Εφόσον παρέχεται ήδη το παράθυρο .__ REDUX_DEVTOOLS_EXTENSION__, μπορείτε να συμπεριλάβετε τα redux devtools με το συνηθισμένο χορό.

ή εάν χρησιμοποιείτε άλλα middleware,

Αυτό θα κάνει το τέχνασμα!

Στις προηγούμενες εκδόσεις του Reactive Native Debugger, τα redux devtools δεν συμπεριλήφθηκαν εκτός πλαισίου. Σε τέτοιες περιπτώσεις,

$ npm i redux-devtools-επέκταση

Επειτα,

Και πάλι, αν όλα έχουν πάει καλά, θα πρέπει να δείτε κάτι τέτοιο.

Για να καταγράψετε τα αιτήματα δικτύου, κάντε δεξί κλικ στην ενότητα React Devtools ή Redux Devtools και κάντε κλικ στο Enable Network Inspect!

Ελπίζατε ότι σας άρεσε! Συνδεθείτε μαζί μου στο GitHub!