[React Native] 앱 디버깅

스택레이스를 보면 어디에서 에러가 발생했는지 알 수 있다

 

 

로그 기록하기

console.log를 추가해 애플리케이션의 흐름을 이해하는 데 도움을 받을 수 있다

특정 시점에 우리가 변수로 저장한 값을 구체적으로 확인 가능

 

터미널에서 물음표?를 누르면 npm start 프로세스를 실행하는 중에 이용 가능한 단축키 목록 확인 가능

m을 누르면 개발자 메뉴를 토글 할 수 있다

iOS에서는 Command+d

안드로이드에서는 Ctrl+m

개발자 메뉴에서는 새로 고침도 강제할 수 있다

자바스크립트를 원격으로 디버그도 가능한데 들어가면 Chrome에서 새 탭이 열리고 Chrome 개발자 도구를 확인 가능하다

네트워크 요청, 콘솔도 확인 가능

 

React 개발자 도구

브라우저에 확장 설치가 가능한데 리액트 네이티브에서는 그렇지 않다

별도 터미널에서 전역으로 시스템에 설치하거나 프로젝트의 의존성으로도 가능!

npm install -g react-devtools

React 개발자 도구의 독립된 버전을 얻을 수 있다

react-devtools

개발자 도구 설치 후 실행하면 터미널에서 독자적인 명령 시작 가능

앱이 구동 중인 상태에서 컴포넌트 트리를 볼 수 있고 상태와 프로퍼티를 분석하거나 그 값들을 변경해 시뮬레이션도 가능하다

 

디버깅에 관한 공식 문서도 참고하면 좋다

Debugging Basics · React Native

Debugging Basics · React Native