[React Native] 디버깅툴 모음

 

 

1. 자체에서 제공하는 디버깅툴 사용

시뮬레이터 > m

 

- Open Debugger: 사용하는데 한계가 있어서 Reactron을 선택했다.

- Element Inspector: 간단히 padding, margin 같은 속성을 체크하기는 좋다. 하지만 각 요소를 웹 개발자도구처럼 각 태그나 class명, 부모-자식 관계를 명확히 파악할 수 없어서 상세하게 보기가 힘들다. 대책 마련 중..(🔨)

 

 

 

 

2. Reactron

커넥션 별로 확인할 수 있다. 더 많은 기능이 있는데 아직 사용해보지는 않았다.

 

1. Timeline

API 호출 시 Request, Response를 굉장히 상세히 사용할 수 있으며 각 요청을 손쉽게 복사하여 공유할 수 있다. (이게 가장 편리하다!)

 

2. State: Redux, mobX 같은 상태관리 라이브러리의 값을 상세히 조회할 수 있는 기능이다.

3. Custom Commands: 사용해보면 좋을 것 같다.

 

 

 

 

3. Flipper

사용 후 업데이트 예정. 앱에서는 렌더링되는 View들의 순서를 알기가 힘든데 이 도구는 그런 장점이 있다고 한다.

네이티브 모듈을 자주 디버깅하거나 앱 상태에 대한 낮은 수준의 정보(하드웨어 센서나 네트워크 프로토콜 등)에 액세스해야하는 경우에는 이 도구가 유용할 수 있으나 npm 라이브러리를 조합해서 앱을 개발하는 경우에는 성능이 오히려 저하되고 오버헤드를 발생시킬 수 있으니 사용하지 않는 것이 나을 수도 있다.

 

 

 

4. react-devtools

react-devtools