디바이스를 흔들거나 iOS 시뮤레이터에서 하드웨어 메뉴의 "흔들기 제스쳐"를 선택해 개발자 메뉴에 접근할 수 있습니다. 앱이 iOS 시뮬레이터에서 실행중인 경우 키보드 단축키 ⌘D 를 눌러 개발자 메뉴에 접근할 수 있습니다. MacOS에서 Android 에뮬레이터를 이용해 앱을 실행하는 경우에는 ⌘M , Windows나 Linux에서 Android 에뮬레이터로 앱을 실행하는 경우에는 Ctrl+M 을 누르면 됩니다. Android의 경우, adb shell input keyevent 82 명령을 실행해 개발자 메뉴를 열 수도 있습니다. (82는 메뉴 키 코드)
릴리즈 빌드에서는 개발자 메뉴가 비활성화됩니다.
Fast Refresh는 React 컴포넌트의 변경 사항에 대해서 거의 즉각적인 피드백을 받을 수 있게 해주는 React Native 기능입니다. 디버깅 중에 Fast Refresh 를 활성화하면 도움이 됩니다. Fast Refresh는 기본적으로 활성화되어 있으며, React Naitve 개발자 메뉴에서 "Fast Refresh 활성화"를 선택해 활성화 또는 비활성화 할 수 있습니다. Fast Refresh를 사용하면 대부분의 편집 내용이 1~2초 내에 반영됩니다.
React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.
React Native는 iOS 시뮬레이터에서 몇 가지 키보드 단축키를 지원합니다. 지원되는 단축키들은 아래에 설명되어 있습니다. 키보드 단축키를 사용하려면 하드웨어 메뉴를 열고 키보드를 선택한 다음, "하드웨어 키보드 연결"이 선택되어 있는지 확인합니다.
개발 빌드에서의 오류 및 경고들은 앱 내의 LogBox에 표시됩니다.
릴리즈(배포) 빌드에서 LogBox는 자동으로 비활성화됩니다.
콘솔 오류 및 경고는 각각 빨간색 또는 노란색 배지가 있는 화면 알림과, 콘솔에서의 오류 및 경고 갯수로 표시됩니다. 콘솔 오류 또는 경고를 보려면, 알림을 눌러서 로그에 대한 전체 화면 정보를 보고 콘솔의 모든 로그들을 페이지화할 수 있습니다.
이러한 알림은 LogBox.ignoreAllLogs() 를 사용해 숨길 수 있습니다. 이 기능은 제품 데모를 제공할 때 유용합니다. LogBox.ignoreLogs() 를 통해 로그별로 알림을 숨길 수도 있습니다. 이 는 서드파티 종속성에서 발생한 경고와 같이, 고칠 수 없는 시끄러운 경고가 있을 때 유용합니다.
마지막 수단으로 로그를 무시하고, 무시된 로그들을 수정하는 작업을 만듭니다.
import { LogBox } from 'react-native';
// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);
// Ignore all log notifications:
LogBox.ignoreAllLogs();undefined is not a function 과 같이 처리되지 않은 JavaScript 오류가 있으면, 오류의 원인과 함께 자동으로 전체 화면으로 LogBox 오류가 열립니다. 이러한 오류는 무시할 수 있고, 최소화할 수 있기 때문에 이러한 오류가 발생했을 때 앱의 상태를 확인할 수는 있습니다. 그러나 이러한 오류는 반드시 해결되어야 합니다.
문법 오류가 발생하면, 문법 오류의 스택 추적 및 위치와 함께 자동으로 LogBox 오류 창이 전체 화면으로 열립니다. 문법 오류는 앱을 계속하기 전에 반드시 수정해야 하는 잘못된 자바스크립트 실행을 나타내기 때문에 무시할 수 없습니다. 이러한 오류를 해제하려면, 문법 오류를 수정한 다음 파일을 저장해서 자동으로 해제되도록 하거나 (Fast Refresh가 활성화되어 있는 경우), cmd+r 을 눌러 리로드하면 됩니다 (Fast Refresh가 비활성화되어 있는 경우).
Chrome에서 JavaScript 코드를 디버깅하려면, 개발자 메뉴에서 "원격으로 JS 디버깅하기"를 선택합니다. 그러면 http://localhost:8081/debugger-ui에서 새로운 탭이 열립니다.
Chrome 메뉴에서 도구 -> 개발자 도구 를 선택해 개발자 도구 를 엽니다. 키보드 단축키를 사용해 개발자도구에 접근할 수도 있습니다 (macOS에서는 ⌘⌥I, Windows에서는 Ctrl Shift I). 더 나은 디버깅 환경을 위해 예외 발생 시 코드 자동 중지(Pause On Caught Exceptions) 기능을 활성화할 수도 있습니다.
참고: Android에서 디버거와 디바이스 사이에 시간이 경과한 경우, 애니메이션, 이벤트 동작 등의 작업이 제대로 작동하지 않거나 결과가 정확하지 않을 수 있습니다. 디버거 기기에서 다음 명령을 실행해서 이를 해결합니다.
adb shell "date `date +%m%d%H%M%Y.%S%3N`"실제 디바이스에서 사용하려면 루트 접근 권한이 필요합니다.
참고: React 개발자 도구 Chrome 확장 기능은 React Native에서 작동하지 않지만, 대신에 해당 독립형 버전을 사용할 수 있습니다. 자세한 내용은 이 섹션을 참조하십시오.
Chrome 개발자 도구 대신에 사용자 지정 JavaScript 디버거를 사용하려면 REACT_DEBUGGER 환경 변수를 사용자 지정 디버거를 시작하는 명령으로 설정하십시오. 그런 다음 개발자 메뉴에서 "원격으로 JS 디버깅하기"를 선택해 디버깅을 시작할 수 있습니다.
디버거는 모든 프로젝트 루트의 목록을 공백으로 구분하여 받습니다. 예를 들어 REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative" 명령을 설정하면, node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app 명령을 사용해 디버거를 시작할 수 있습니다.
이러한 방식으로 실행되는 사용자 지정 디버거 명령은, 수명이 짧은 프로세스여야 하며, 200 kilobytes 이상의 출력을 생성해서는 안 됩니다.
"원격으로 JS 디버깅하기"를 활성화할 필요 없이, Safari를 사용해 앱의 iOS 버전을 디버깅할 수 있습니다.
- Safari에서 개발 메뉴 활성화하기:
설정 → 고급 → "메뉴 바에서 개발 메뉴 보기" 선택 - 앱의 JSContext 선택하기:
개발 → 시뮬레이터 → JSContext - 콘솔과 디버거가 있는 Safari의 Web Inspector를 열여야 합니다.
소스 맵은 기본적으로 활성화되어 있지만, 이 가이드 또는 비디오에 따라 소스 맵을 활성화하고 소스 코드의 올바른 위치에 중단점을 설정할 수 있습니다.
그러나, 앱이 다시 로드될 때마다 (live reload를 사용함으로써, 또는 수동으로 다시 로드함으로써), 새로운 JSContext가 생성됩니다. "JSContext용 Web Inspectors 자동 표시"를 선택하면 최신 JSContext를 수동으로 선택할 필요가 없습니다.
React 개발자 도구의 독립형(standalone) 버전을 사용해 React 컴포넌트 계층을 디버깅할 수 있습니다. 이 패키지를 사용하려면 react-devtools 패키지를 전역으로 설치하십시오.
참고:
react-devtools버전 4가 제대로 작동하려면react-native버전이 0.62이상이어야 합니다.
-
npm
npm install -g react-devtools
-
Yarn
yarn global add react-devtools
이제 터미널에서 react-devtools 명령을 실행해 독립형 개발자도구 앱을 시작하세요.
react-devtools
그러면 몇 초 안에 시뮬레이터에 접속됩니다.
참고: 전역 설치를 피하고 싶다면,
react-devtools를 프로젝트 종속성으로 추가할 수 있습니다.npm install --save-dev react-devtools로react-devtools패키지를 프로젝트에 추가한 다음,package.json의script섹션에"react-devtools": "react-devtools"를 추가합니다. 그리고 프로젝트 폴더에서npm run react-devtools를 실행해 개발도구를 엽니다.
인앱 개발자 메뉴를 열고 "Inspector 활성화"를 선택합니다. 그러면 UI 엘리먼트를 누르고 해당 엘리먼트에 대한 정보를 볼 수 있는 오버레이가 나타납니다.
react-devtools 가 실행중일 때는 Inspector가 축소 모드가 되고, 대신에 DevTools를 기본 UI로 사용합니다. 이 모드에서는 시뮬레이터에서 무언가를 클릭하면 DevTools에서 관련된 컴포넌트가 표시됩니다.
이 모드를 종료하려면 동일한 메뉴(=인앱 개발자 메뉴)에서 "Inspector 비활성화"를 선택하면 됩니다.
Chrome에서 JavaScript를 디버깅할 때, 브라우저 콘솔에서 React 컴포넌트의 props와 state를 검사할 수 있습니다.
먼저, Chrome 디버깅 가이드에 따라 Chrome 콘솔을 엽니다.
Chrome 콘솔의 왼쪽 상단 드롭다운에 debuggerWorker.js 가 표시되는지 확인하십시오. 이 단계는 필수입니다.
그리고 React DevTools에서 React 컴포넌트를 선택하세요. 이름으로 컴포넌트를 찾을 수 있도록 상단에 검색 상자가 있습니다. 선택하는 즉시 Chrome 콘솔에서 $r 로 사용할 수 있으므로 props, state, 인스턴스 및 속성을 검사할 수 있습니다.
개발자 메뉴에서 "성능 모니터"를 선택해 성능 오버레이를 활성화하여 성능 문제를 디버깅할 수 있습니다.
Reactotron 은 Redux나 MobX-State-Tree 애플리케이션 상태를 검사하고, 사용자 지정 로그 보기 기능, 사용자 지정 명령어 실행하기(state, store, restore state snapshots 등) 기능, 그리고 React Native 앱의 다른 유용한 디버깅 기능들을 사용할 수 있게 해주는 오픈 소스 데스크탑 앱입니다.
README에서 설치 가이드를 볼 수 있습니다. Expo를 사용 중이라면, Expo에 설치하는 방법을 참고하세요.
다음 섹션은 네이티브 코드가 expose된 프로젝트에만 적용됩니다. expo-cli 워크플로우를 사용하는 경우, 이 API를 사용하기 위해 ejecting 에 관한 가이드를 참고하십시오.
앱이 실행 중일 때 터미널에서 다음 명령어들을 실행함으로써 iOS 또는 Android 앱용 콘솔 로그를 표시할 수 있습니다.
npx react-native log-ios
npx react-native log-android또한 iOS 시뮬레이터에서는 디버깅 -> 시스템 로그 열기... 를 통해, Android 앱이 디바이스나 에뮬레이터에서 실행중일 때는 터미널에서 adb logcat *:S ReactNative:V ReactNativeJS:V 을 실행함으로써 콘솔 로그에 접근할 수 있습니다.
Create React Native App 또는 Expo CLI를 사용 중인 경우, 콘솔 로그는 번들러와 동일한 터미널 출력에 이미 나타납니다.
Create React Native App 또는 Expo CLI를 사용 중인 경우 이미 설정이 되어 있습니다.
iOS 디바이스에서 컴퓨터의 IP 주소로 파일을 열고, 개발자 메뉴에서 "원격으로 JS 디버깅하기"를 선택합니다. RCTWebSocketExecutor.m
USB를 통해 연결된 Android 5.0 이상의 기기에서는, adb 커맨드 라인 툴을 사용해 디바이스로부터 컴퓨터까지의 포워딩 포트를 설정할 수 있습니다.
adb reverse tcp:8081 tcp:8081
또는 개발자 메뉴에서 "개발 설정"을 선택한 후 "디바이스 디버깅 서버 호스트"를 컴퓨터의 IP 주소와 일치하도록 업데이트합니다.
문제가 발생하면 Chrome 확장 프로그램 중 하나가 디버거와 예상치 못한 방식으로 상호작용하고 있을 수 있습니다. 확장 프로그램을 모두 비활성화하고, 문제가 있는 확장 프로그램을 찾을 때까지 하나씩 활성화해보십시오.
네이티브 모듈 작성 등 네이티브 코드 작업 시, 안드로이드 스튜디오나 XCode에서 앱을 시작하고, 표준 네이티브 앱을 구축할 때와 마찬가지로 네이티브 디버깅 기능(중단점 설정 등)을 활용할 수 있다.