Падрабязнае кіраўніцтва па ўстаноўцы React Native Debugger для прыкладання Expo

[Абноўлена 20 сакавіка 2019 г.]

React Native Debugger - самае святое пры адладцы прыкладанняў React Native, паколькі ён аб'ядноўвае Chrome Devtools, React Devtools і Redux Devtools у адным акне.

Тут я ўяўляю крокі па ўстаноўцы React Native Debugger для прыкладання Expo.

[Кароткае кіраўніцтва "

  • Спампаваць React Native Debugger са старонкі выпуску.
  • Націсніце Адкрыць адладчык, ⌘ + t, каб адкрыць новае акно і ўсталяваць порт на 19001.
  • Дадатак npm start expo, адкрыйце меню распрацоўніка, актывуйце "Адладка JS Remote".
  • Наладзьце "__REDUX_DEVTOOLS_EXTENSION__", як паказана тут.

Хутчэй за ўсё, гэта павінна працаваць!

Калі ў вас узніклі праблемы ці вам патрэбныя дадатковыя парады і рэкамендацыі, прачытайце падрабязныя інструкцыі ніжэй.

  1. Усталюйце React Native Debugger

Каб усталяваць React Native Debugger, вы можаце загрузіць яго са старонкі выпуску.

У MacOS вы можаце выкарыстоўваць Homebrew для ўстаноўкі:

$ абнаўленне самагонкі і & nsw заварыце ўстаноўку адладчыка React-Native

2. Запусціце React Native Debugger

Каб запусціць React Native Debugger, уручную націсніце Адкрыць прыкладанне.

Вы можаце выкарыстоўваць такі сцэнар CLI для MacOS.

$ open 'rndebugger: // set-debugger-loc? хост = localhost & port = 19001 '

Порт усталяваны ў 19001, таму што гэты порт выкарыстоўвае каардынатар метро Expo. Аднак, калі вы ўручную націснеце Адкрыць прыкладанне, порт будзе ўстаноўлены на 8081, бо гэта налада па змаўчанні ў React Native Debugger.

Каб усталяваць іншы порт, націсніце іншы + t, каб адкрыць новае акно, у якім вы зможаце скінуць порт на порт пастаўшчыка Expo-Metro (стандарт 19001).

3. Запусціце прыкладанне Expo і адладзьце JS выдалена

$ npm пачатак

Адкрыйце прыкладанне, адкрыйце меню распрацоўніка і актывуйце «Адладка JS Remote». Цяпер трэба падключыць інструменты для распрацоўшчыкаў Chrome.

Каб адкрыць меню распрацоўніка, вам трэба "пахіснуцца" з кліентам Expo, з трэнажорам iOS "⌘ + d" і эмулятарам Android "⌘ + m".

У MacOS вы можаце аб'яднаць крокі 2 і 3 у такі сцэнар.

4. Наладзьце React Devtools

Калі вы карыстаецеся Expo-кліент (рэальная прылада праз WLAN), у дакументах гаворыцца, што можа спатрэбіцца дадатковы крок.

Знайдзіце файл setupDevtools.js пад node_modules / react-native / Бібліятэкі / Core / Devtools / setupDevtools.js.

Цяпер уласцівасць "host", перададзеная функцыі "connectToDevTools", павінна быць зменена на ваш лакальны IP-адрас, як апісана ніжэй.

(Праверце свой мясцовы IP-адрас тут)

(Вам патрэбен ваш "лакальны" IP-адрас, а не "агульнадаступны" IP. Той, які вы атрымліваеце ад Google, гэта мой IP. Гэта агульнадаступны IP.)

Цяпер рэагуйце devtools!

5. Наладзьце Redux Devtools

Паколькі акно .__ REDUX_DEVTOOLS_EXTENSION__ ужо існуе, вы можаце інтэграваць Redux Devtools са звычайным танцам.

альбо калі вы выкарыстоўваеце іншае праграмнае забеспячэнне,

Гэта зробіць трук!

У папярэдніх версіях React Native Debugger інструменты распрацоўшчыка Redux не былі ўключаны па змаўчанні. У такіх выпадках

$ npm i redux-devtools-пашырэнне

Тады

Нават калі ўсё ў парадку, вы павінны ўбачыць нешта падобнае.

PS Каб увайсці ў сеткавыя запыты, пстрыкніце правай кнопкай мышы раздзел React Devtools або Redux Devtools і націсніце Уключыць праверку сеткі!

Спадзяюся, вам спадабалася! Падключайцеся са мной на GitHub!