Expo қосымшасы үшін React Native Debugger бағдарламасын орнату туралы егжей-тегжейлі нұсқаулық

[Жаңартылған 20 наурыз 2019 ж.]

React Native Debugger - React Native қосымшаларын күйге келтіру кезіндегі ең қасиетті нәрсе, өйткені ол Chrome Devtools, React Devtools және Redux Devtools-ді бір терезеде біріктіреді.

Мұнда мен Expo қосымшасына React Native Debugger бағдарламасын орнату қадамдарын ұсынамын.

[Жылдам бастау нұсқаулығы]

  • Шығару бетінен React Native Debugger бағдарламасын жүктеңіз.
  • Жаңа терезені ашып, портты 19001 етіп орнату үшін Open + t күйіндегі дебаггерді ашыңыз.
  • npm start expo қосымшасы, әзірлеуші ​​мәзірін ашыңыз, «JS Remogug Remote» іске қосыңыз.
  • Мұнда көрсетілгендей «__REDUX_DEVTOOLS_EXTENSION__» орнатыңыз.

Сірә, ол жұмыс істеуі керек!

Егер сізде проблемалар болса немесе басқа кеңестер мен ұсыныстар қажет болса, төмендегі егжей-тегжейлі нұсқауларды оқыңыз.

  1. React Native Deugugger бағдарламасын орнатыңыз

React Native Debugger бағдарламасын орнату үшін сіз оны шығарылған беттен жүктей аласыз.

MacOS жүйесінде Homebrew көмегімен орнату үшін:

$ қайнатуды жаңарту және & сыра қайнатпасы React-Native түзету құралын орнатады

2. React Native Deugugger бағдарламасын іске қосыңыз

Reative Native Debugger бағдарламасын іске қосу үшін бағдарламаны қолмен ашу түймесін басыңыз.

Сіз осындай CLI сценарийін MacOS үшін пайдалана аласыз.

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

Порт 19001-ге орнатылған, себебі Expo Metro үйлестірушісі бұл портты пайдаланады. Алайда, бағдарламаны қолмен ашсаңыз, порт 8081 деңгейіне орнатылады, себебі бұл React Native Debugger бағдарламасында әдепкі параметр болып табылады.

Басқа портты орнату үшін, басқа + t түймесін басып, Expo-Metro байламының портына портты қалпына келтіруге болатын жаңа терезені ашыңыз (стандарт 19001).

3. Expo қолданбасын іске қосыңыз және қашықтан JS түзетіңіз

$ npm басталуы

Бағдарламаны ашыңыз, әзірлеуші ​​мәзірін ашыңыз және «JS-ді қашықтан жоюды» қосыңыз. Енді Chrome әзірлеу құралдары қосылуы керек.

Әзірлеуші ​​мәзірін ашу үшін сіз Expo клиентімен, «⌘ + d» IOS тренажерімен және «⌘ + m» Android эмуляторымен «дірілдеуіңіз» керек.

MacOS-де сіз 2 және 3-қадамдарды осыған ұқсас сценариймен біріктіре аласыз.

4. React Devtools бағдарламасын орнатыңыз

Егер сіз Expo-Client (WLAN арқылы нақты құрылғы) пайдалансаңыз, құжаттар қосымша қадам қажет етілуі мүмкін екенін айтады.

Node_modules / реакцияға негізделген / Кітапханалар / Core / Devtools / setupDevtools.js астында setupDevtools.js файлын табыңыз.

Енді «connectToDevTools» функциясына өткен «хост» сипаты төменде сипатталғандай жергілікті IP мекенжайыңызға өзгертілуі керек.

(Жергілікті IP мекенжайын тексеріңіз)

(Сізге «жалпы» IP емес, «жергілікті» IP-мекен-жай қажет. Googling-ден алатын IP-мекен-жайыңыз - жалпыға ортақ IP.)

React devtools енді іске қосылуы керек!

5. Redux Devtools орнатыңыз

.__ REDUX_DEVTOOLS_EXTENSION__ терезесі бұрыннан бар болғандықтан, Redux Devtools-ны әдеттегі бимен біріктіруге болады.

немесе егер сіз ортаңғы бағдарламаны қолдансаңыз,

Бұл трюк жасайды!

React Native Debugger алдыңғы нұсқаларында, Redux dev құралдары әдепкі бойынша қосылмаған. Мұндай жағдайларда

$ npm i redux-devtools-кеңейту

Содан кейін

Егер бәрі жақсы болса да, сіз осындай нәрсені көруіңіз керек.

PS Желілік сұраныстарды тіркеу үшін React Devtools немесе Redux Devtools бөлімін тінтуірдің оң жақ түймешігімен нұқыңыз және Network Inspect іске қосыңыз!

Сізге ұнады деп сенемін! Менімен GitHub арқылы қосылыңыз!