디버깅

 
 
 
 
 

LogBox

Error와 Warning은 앱의 LogBox로 출력된다.
LogBox는 개발자메뉴와 마찬가지로 release build에선 자동으로 비활성화됨.
 

Console Errors and Warnings

콘솔 오류와 경고는 각각 빨간색 또는 노란색 배지와 함께 화면에 알림으로 표시되며, 콘솔에 오류와 경고 개수도 같이 표시된다. 콘솔 오류 또는 경고를 보려면 알림을 눌러 로그에 대한 전체 화면 정보를 보자.
콘솔 알림 숨기기
LogBox.ignoreAllLogs()
이런 알림들은 LogBox.ignoreAllLogs()를 사용하여 숨길 수 있다.
서드파티 의존성과 같이 우리가 고칠 수 없는 경고들이 많이 뜬다면 유용하게 활용 가능하다.
import { LogBox } from 'react-native';

//메세지와 관련된 특정 로그 알림 무시하기
LogBox.ignoreLogs(['Warning: ...']);

//모든 로그 알림 무시하기
LogBox.ignoreAllLogs();
 

Unhandled Errors (무시가능)

"undefined is not a function"와 같은 Unhandled JavaScript Error는 오류의 소스와 함께 자동으로 전체 화면 LogBox Error가 열린다.
이러한 오류는 무시할 수 있고 최소화할 수 있으므로 앱은 실행되지만, 이런 오류들도 무시해선 안된다.
 

Syntax Errors (실행 자체가 안됨)

구문 오류도 소스와 함께 전체 화면 LogBox 오류를 자동으로 연다.
이 오류는 잘못된 JavaScript 실행을 나타내기 때문에 무시할 수 없고, 앱을 계속하기 전에 반드시 수정해야 한다.
 

Chrome 개발자 툴

JavaScript 코드를 Chrome에서 디버깅하려면, 앱의 개발자 메뉴에서 "Debug" 선택.
⇒ http://localhost:8081/debugger-ui 가 새 탭에서 열린다.
notion image
Developer Tools는 커맨드+옵션+I 단축키로 열 수 있다.
Puase On Caught Exceptions도 설정 가능하다.
참고: Resact Developer Tools Chrome Extension은 Resact Native에선 작동하지 않는다. 대신 아래에서 다루는standalone 버전을 사용해라.
 

React Developer Tools (Standalone)

React Component 계층구조 디버깅 가능.
사용하려면 react-devtools package를 globally하게 설치해야 한다.
react-devtools 버전4는 react-native 버전 0.62 이상에서 제대로 돌아간다.
#react-devtools package 설치
$ npm install -g react-devtools
devtools 설치 시 퍼미션 에러가 뜰 경우
sudo 해도 electon 설치 시 다시 에러가 나므로 chmod로 write 권한을 주고 다시 설치하자.
notion image
 
#react-devtools 실행
$ react-devtools
notion image
 

React Native Inspector와 통합하기

notion image
React Native 앱에서 흔들어서 관리자 메뉴 띄우고 Show Inspector 누르면 검정 창이 뜸.
여기서 원하는 컴포넌트 요소 클릭하면 관련정보 바로 확인할 수 있다.
 
notion image
react-devtools가 켜진 상태에서 Show Inspector를 누르면 앱이 아닌 react-devtools로 바로 연동된다.
 

Inspecting Component Instances

(컴포넌트 인스턴스 점검)
Chrome에서 JavaScript를 디버깅할 때 브라우저 콘솔에서 React Component의 Props와 State를 검사할 수 있다.
먼저 Chrome의 디버깅 지침에 따라 Chrome 콘솔을 열고,
Chrome 콘솔의 왼쪽 상단 모서리에 있는 드롭다운에서 디버거가 표시되는지 확인하자. (worker.js)
 
앱에서 Show Inspector가 켜진 상태 + Debugging이 켜지고 Chrome에서 연결된 상태
notion image
notion image
단축키 f12 혹은 커맨드+옵션+I(아이)
 

성능 모니터 (Performance)

퍼포먼스 문제 디버깅을 위해 퍼포먼트 오버레이 활성화 가능.
앱에서 흔들어서 관리자 메뉴 띄우고 "Show Perf Monitor" 클릭하면 됨.
notion image
 

Debugging Application State

Reactron은 Redex 또는 MobX-State-Tree 애플리케이션 상태를 검사하고 사용자 지정 로그를 볼 수 있는 오픈 소스 데스크톱 앱으로, 상태 재설정, 상태 스냅샷 저장 및 복원 등의 사용자 지정 명령 및 리액트 네이티브 앱에 대한 기타 유용한 디버깅 기능을 실행할 수 있다.
 
README에서 설치 설명서를 볼 수 있으며, 엑스포를 사용중이라면 엑스포에서 설치 방법을 참조하자.
 

Native Debugging

아래 내용은 Native Code로 작성된 것에 한정된다.
Expo를 쓰고있다면 패스하던지 eject 해야 적용가능.
 

콘솔 로그 접근

다음 명령어를 통해 콘솔 로그를 볼 수 있다.
$ npx react-native log-ios
$ npx react-native log-android
  • iOS시뮬레이터라면 Debug→Open System Log... 클릭으로 확인할 수 있고,
  • 안드로이드 앱 혹은 에뮬레이터라면 adb logcat *:S ReactNative:V ReactNativeJS:V 로도 확인 가능.
Create Reactive Native App 또는 Expo CLI를 사용하는 경우 콘솔 로그가 번들러와 동일한 터미널 출력에 이미 표시되고 있을 것이다.
 

Native Code 디버깅

네이티브 모듈을 쓸 때와 같이 네이티브 코드로 작업할 때 안드로이드 스튜디오나 Xcode에서 앱을 실행할 수 있으며, 표준 네이티브 앱을 구축할 때와 마찬가지로 네이티브 디버깅 기능(브레이크포인트 설정 등)을 활용할 수 있다.