소개

expo를 사용하여 react-native로 개발할 때 디버그 방법으로 react-native-debugger가 있습니다. 실기로 동작을 확인할 때의 디버그 설정이 조금 번거로웠기 때문에 정리합니다. redux의 디버그가 메인입니다.

앱 설치

먼저 react-native-debugger 앱을 여기에서 설치합니다.

node_modules 편집

그런 다음 node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js를 엽니 다.
52행의 호스트 부분을 편집합니다. Your IP는 지금 연결된 IP 주소를 넣으십시오. Mac의 경우 IP 주소는 시스템 환경 설정→네트워크→상황의 「IP 주소 hogehoge가 설정되어 있습니다.」의 곳에 있습니다. 편집 후↓

App.js 편집

App.js를 이런 식으로 만듭니다.

포인트는

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

입니다. 처음에는 이것이 없어서 작동하지 않았습니다.
설정은 이것으로 끝입니다.

절차

http://localhost:<port>/debugger-ui를 닫으십시오

react-native-debugger 앱을 시작하십시오

스마트 폰의 Debug JS Remotely를 활성화하십시오.

REACT_DEBUGGER="unset ELECTRON_RUN_AS_NODE && open -g 'rndebugger://set-debugger-loc?port=19001' ||" npm start에서 프로젝트를 시작하십시오.

참고, 출처 등

htps : // 기주 b. 이 m/j엔 0409/레아 ct-나치ゔぇ-에서 부숴 r/bぉb/마s r/도 cs/게짱 g-s r d. md

h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 52946133 / 우나 b ぇ - 우세 라 ct 나치ゔ〇/52953017#52953017