React Native 디버그

1. 기본 Dev Menu

iOS Simulator

• Device > Shake
• Cmd ⌘ D

Android emulators

• Cmd ⌘ M
• Ctrl M

2. Flipper

• 설치
  https://fbflipper.com/ 다운로드
  또는 brew install — cask flipper
• Flipper 설정
  • android/gradle.properties.
    • FLIPPER_VERSION=0.147.1
  • yarn add react-native-flipper
• IDB 설정
  • brew tap facebook/fb
  • brew install idb-companion
    • python3 -m pip config set global.break-system-packages true
  • pip3.6 install fb-idb
  • which idb ⇒ (/opt/anaconda3/bin/idb) 주소 설정
• 필요한 plugin 설치
• Flipper 실행
  

참고:

https://sugandsingh5566.medium.com/unlocking-react-native-debugging-powers-with-flipper-a-step-by-step-guide-b40e66ba994c

3. Flipper 대체

컴파일 시간이 길어지고 문제가 많았으며 앱 연결에 문제가 있었고 Flipper에 전혀 영향을 주지 않는 업그레이드가 실패할 수 있었다. Flipper의 기능은 다른 라이브러리로 대체 될수 있다.

React DevTools (임시 스타일링 가능)

• npx react-devtools 실행
  

Log network calls(네트워크 로그)

1) Reactotron 설치

• brew install --cask reactotron
• npm i --save-dev reactotron-react-native

2) Recoil 연동

• npm install --save-dev reactotron-recoil-plugin

3) ReactotronConfig.js 파일 생성

import Reactotron from 'reactotron-react-native';
        // @ts-ignore
        import ReactotronFlipper from 'reactotron-react-native/dist/flipper';
        import {reactotronRecoilPlugin} from 'reactotron-recoil-plugin';
 export const instance = Reactotron.configure({
          name: 'example test',
          createSocket: path => new ReactotronFlipper(path),
        })
          .useReactNative()
          .use(reactotronRecoilPlugin());
if (__DEV__) {
          instance.connect();
        }
// @ts-ignore
        console.tron = instance;

4) App.js 수정

import { RecoilDebugObserver } from "reactotron-recoil-plugin";
        import { instance } from './reactotronConfig';
function App() {
          return (
            <RecoilRoot>
              <RecoilDebugObserver instance={instance} />
              {/* ... */}
            </RecoilRoot>
          );
        }

참고: https://github.com/kevinnath1007/reactotron-recoil-plugin

Layout Inspector / UI Debugger (레이아웃 확인)

1) Android

• Help > Check for Updates (업데이트 필요시)
  (macOS에서는 Android Studio > Check for Updates)
• View > Tool Windows > Layout Inspector
  2) XCode
• Debug menu > “Attach to Process”, 앱 선택.
• Debug menu > “View Debugging” and “Capture View Hierarchy”.
  

참고 :
https://shift.infinite.red/why-you-dont-need-flipper-in-your-react-native-app-and-how-to-get-by-without-it-3af461955109