Debugging

참조: React Native 공식 홈페이지

 

1. 앱에서 개발자 메뉴로 접근 하는 방법 

 

• 첫번째 방법 : 스마트폰을 좌우로 열심히 흔들어 준다. (스마트폰이 연결이 되어 있다는 전제하에 )

• 두번째 방법 :  iOS 시뮬레이터 Hardware menu에서 "Shake Gesture" 클릭

 

• 세번째 방법 : 앱이 iOS 구동중일때는 ⌘D
  앱이 안드로이드에서 구동 중일때는 ⌘M (윈도우는 Ctrl + M)

 

 

• 마지막 방법으로는

adb shell input keyevent 82

 명령어 입력 

 

!!!!!!!! 설마 release로 빌드 된곳에 개발자 메뉴 안된다고 하는 사람 없겠지 (당연히 비활성화 됨) !!!!!!!

 

2. Fast Refresh 활성화

 

 

react component가 변화는것을 즉각적으로 앱에 반영 해주는 기능 이다.

디버깅중에 이것을 활성화 하면 많은 도움을 줄 수 있다.

Fast Refresh는 활성화가 default로 되어 있다.  

React Native developer menu 언제든지 껐다 켰다 할 수 있다.

 

3. Keyboard Shorcuts 활성화

 

iOS 시뮬레이터에서 지원하는 단축키 기능으로 

iOS 시뮬레이터 활성화 상태에서

I/O menu -> Keyboard 선택 -> Connect Hardware Keyboard 

 

4. LogBox

 

개발자 모드로 빌드시 에러와 경고를  LogBox를 이용하여 표시 할수 있다. 

!!!!!!!! 설마 release로 빌드 된곳에  안된다고 하는 사람 없겠지 (당연히 자동. 비활성화 됨) !!!!!!!

 

• Console Errors 와 Warnings

 

 

빨간 또는 노란 배지로 해당 스크린에 표시 할수 있다. 

error와 warning 표시 각각 다르게 갯수가 표시된다. 

자세한 정보를 보고 싶다면 표시된 error나 warning 살포시 눌러주면 된다.

LogBox 참조사이트

 

import {LogBox} from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

만약 표시 하기 싫다면 LogBox.ignoreAllLogs() 를 사용하면 된다. 
(데모 버전 보여줄때 사용하면 유용하다고 함..)

LogBox.ignoreLogs()는 특정 단어만 무시 할수도 있다 
(고칠수 없는 경고 발생시 사용하면 유용하다고 함.. ex 라이브러리 사용시)

 

• Unhandled Errors

undefined is not a function 와 같이 알수 없는 에러들은 자동으로 
전체화면 LogBox(에러와 에러와 관련된 소스들과 함께)가 나타날거다.

이런 오류들은 무시나 최소화 할수 있지만 왠만하면 해결해서
안뜨게 하는게 좋다. 

 

• Syntax Errors

syntax error 발생시
전체화면 LogBox(스택경로와 해당에러 위치와 함께)가 나타 날거다

이 에러는 무시가 할수 없다. 
앱을 실행하는 동안 발생한 자바스크립트 실행 에러이기 때문에

해당 오류를 수정하고 저장한다음 다시 reload 해서
앱을 실행 시켜야 한다.