디버깅¶

vscode를 이용해서 디버깅을 할 수 있습니다.

우선 jdk 위치를 설정해야 합니다. ctrl + shift + p를 눌러 사용자 설정을 눌러 java.home을 검색하여 jdk가 설치된 디렉토리를 지정합니다. 환경에 따라 다를 수 있지만 다음과 같이 설정할 수도 있습니다.
"java.home": "C:\\Program Files\\Java\\jdk1.8.0_181",
디버그 버튼을 누르면 어떤 디버거를 선택할 지 고르는 창이 열립니다. React Native를 선택합니다.
그리고 에뮬레이터를 실행시킵니다.
에뮬레이터에서 ctrl + m을 눌러 Debug JS Remotely를 선택합니다.
프로젝트 코드에 적당한 위치에 중단점(break point)를 설정합니다.
디버그 선택하는 항목에서 Debug Android를 선택합니다.
초록색 실행 버튼을 눌러 실행합니다.
에뮬레이터에서 앱이 실행되면서 설정해 놓은 중단점에서 멈추고 기다리게 됩니다.
코드를 수정한 후 저장한 후 앱에서 키보드 R 을 두번 눌러 수정된 앱을 다시 실행합니다.

크롬 브라우저 이용¶

에뮬레이터를 실행시킵니다.

emulator -list-avds
emulator -avd device-name

프로젝트 디렉토리로 이동해서 프로그램을 실행시킵니다.

react-native run-android

앱이 실행되면 ctrl + m을 눌러 개발 메뉴를 띄우고 Dev Settings > Debug server host & port for device를 클릭합니다. localhost:8081을 지정합니다.

다시 앱을 실행시키고 ctrl + m을 눌러 Debug JS Remotely를 클릭합니다. 그러면 크롬 브라우저에 다음과 같은 메시지가 표시되면 정상적으로 연결된 겁니다.

Status: Debugger session #0 active.

react-devtools를 이용하는 방법도 있습니다.