React Native: React Devtools 연동하기

React 관련 프로젝트를 편하게 디버깅 할 수 있는 React Devtools를 연동시켜보자

 

설치

npm install -g react-devtools

 

실행

react-devtools

 

위 명령어를 실행하면 아래와 같은 창이 뜬다.

The server is listening on the port 8097 이라는 문구를 볼 수 있다.

React devtools와 react native의 Android 프로젝트를 연결해보자

 

우선 npx react-native run-android를 통해 안드로이드 앱을 개발모드로 실행한다.

그리고

adb -s 디바이스명 reverse tcp:8097 tcp:8097

 

또는, 하나의 디바이스만 연결되어 있는 경우 디바이스명을 생략하고

adb reverse tcp:8097 tcp:8097

 

(디바이스명을 보려면 명령어: adb devices)

 

* 꼭 안드로이드 앱 개발모드로 실행한 경우에만 저 명령어를 써야한다.

그렇지 않고 먼저 명령어를 입력하면 adb 명령어 자체가 안먹는다.

 

그리고 metro 서버 shell에서 d를 눌러서 개발관련 설정을 띄운다

 

위에서 Show Element Inspector (또는 Show inspector)를 클릭하면 DevTools가 활성화된다.

 

 

출처: https://www.npmjs.com/package/react-devtools