React Native에서 로깅을 수행하는 방법은 무엇입니까?
답변:
console.log 공장.
iOS에서는 기본적으로 Xcode 내의 디버그 창에 기록됩니다.
IOS 시뮬레이터에서 ( ⌘+ D)를 누르고 Remote JS Debugging을 누릅니다 . 로컬 호스트에 http : // localhost : 8081 / debugger-ui 리소스가 열립니다 . 거기에서 Chrome 개발자 도구 자바 스크립트 콘솔을 사용하여 볼 수 있습니다.console.log
사용 console.log, console.warn등
React Native 0.29부터 다음을 실행하여 콘솔에서 로그를 볼 수 있습니다.
$ react-native log-ios
$ react-native log-android
react-native log-ios evelopers-Mac-mini com.apple.CoreSimulator.SimDevice.02C1B6C7-2CD2-406E-AC93-DD430E5E3C69 [948] (com.apple.videosubscriptionsd)를
사전 반응 네이티브 0.29, 콘솔에서 다음을 실행하십시오.
adb logcat *:S ReactNative:V ReactNativeJS:V
Post React Native 0.29, 다음을 실행하십시오.
react-native log-ios
또는
react-native log-android
마틴이 다른 답변에서 말했다시피.
모든 console.log (), 오류, 메모 등이 표시되며 속도가 느려집니다.
adb logcat -v time -s ReactNativeJS
사용하다 console.debug("text");
터미널 내부에 로그가 표시됩니다.
단계 :
- 응용 프로그램을 실행하십시오.
react-native run-ios # For iOS
react-native run-android # For Android- 로거를 실행하십시오.
react-native log-ios # For iOS
react-native log-android # For AndroidInitializing React Xplat Bridge..
Visual Studio Code에는 console.log를 표시 할 수있는 알맞은 디버그 콘솔이 있습니다.
VS 코드는 종종 React Native Friendly입니다.
여기에서 Chrome 개발자 도구 가 친구입니다.
다음 단계를 수행하면 Chrome 개발자 도구로 이동하여 console.log문장 을 볼 수 있습니다 .
단계
- 아직 Chrome을 설치 하지 않은 경우 설치
- 실행 응용 프로그램 사용
react-native run-android또는react-native run-ios - 개발자 메뉴 열기
- Mac :
⌘+DiOS 또는⌘MAndroid iOS - Windows / Linux : Android 전화 흔들기
- Mac :
- 고르다
Debug JS Remotely - Chrome에서 디버거를 시작해야합니다.
- Chrome에서 : 탭
Tools -> More Tools -> Developer Options에 있는지 확인console하십시오.
이제 console.log명령문이 실행될 때마다 Chrome 개발자 도구에 표시되어야합니다. 공식 문서는 여기에 있습니다 .
React Native Debugger를 사용하는 것이 좋습니다. 이 명령을 사용하여 다운로드하여 설치할 수 있습니다.
brew update && brew cask install react-native-debugger
또는
아래 링크를 확인하십시오.
https://github.com/jhen0409/react-native-debugger
행복한 해킹!
start하고 있습니다. 크롬 대신 기본 디버거로 디버거가 열리고 -g플래그는 다시로드에 중점을 두지 못하게합니다. "start": "env REACT_DEBUGGER=\"$([ -d '/Applications/React Native Debugger.app' ] && echo \"open -g 'rndebugger://set-debugger-loc?host=localhost&port=8081' --args\")\" node node_modules/react-native/local-cli/cli.js start"
XCode의 디버그 영역에 콘솔 메시지가 나타나지 않았습니다. 내 응용 프로그램에서 cmd-d를 사용하여 디버그 메뉴를 표시하고 "Safari의 디버그"를 설정 한 것을 기억했습니다.
이 기능을 끄고 일부 메시지가 콘솔 메시지가 아닌 출력 메시지로 인쇄되었습니다. 그러나 로그 메시지 중 하나는 다음과 같이 말했습니다.
__DEV__ === false, development-level warning are OFF, performance optimizations are ON"
이전에 다음 명령을 사용하여 실제 장치에서 테스트하기 위해 프로젝트를 번들로 제공했기 때문입니다.
react-native bundle --minify
이것은 "dev-mode"를 설정하지 않고 번들로 제공됩니다. dev 메시지를 허용하려면 --dev 플래그를 포함하십시오.
react-native bundle --dev
그리고 console.log 메시지가 돌아 왔습니다! 당신이 진짜 장치에 번들되어 있지 않은 경우, 다시 점 잊지 마세요 jsCodeLocation에 AppDelegate.m(내가 한!) 로컬 호스트.
Xcode Simulator에서 [command + control + Z]를 누르고 JS 원격으로 디버그를 선택한 다음 [command + option + J]를 눌러 Chrome 개발자 도구를 엽니 다.
React-Native에서 로그를 얻는 것이 매우 간단합니다.
console.log 및 console.warn을 사용하십시오.
console.log('character', parameter)
console.warn('character', parameter)
이 로그는 브라우저 콘솔에서 볼 수 있습니다. 기기 로그를 확인하거나 프로덕션 APK 로그를 말하려는 경우 사용할 수 있습니다
adb logcat
adb -d logcat
console.logand console.warn문을 제외한 모든 것이 ADB에 나타납니다 .
도움을 줄 수있는 react-native-xlog 모듈 은 react-native에 대한 WeChat의 Xlog 입니다. Xcode 콘솔과 로그 파일로 출력 할 수 있으며, 제품 로그 파일은 디버그에 도움이 될 수 있습니다.
Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');
개발 시간 로깅
개발 시간 로깅의 경우 console.log ()를 사용할 수 있습니다 . 프로덕션 모드에서 로깅을 비활성화하려면 앱의 Root Js 파일에서 로깅을 비활성화하려면 다음과 같이 빈 함수를 지정하십시오. console.log = {} 실제로 프로덕션에 필요한 앱 전체에서 전체 로그 게시를 비활성화합니다. console.log는 시간을 소비합니다.
런타임 로깅
프로덕션 모드에서는 실제 사용자가 실시간으로 앱을 사용할 때 로그를 확인해야합니다. 이것은 버그, 사용법 및 원치 않는 경우를 이해하는 데 도움이됩니다. 이를 위해 시장에서 많은 타사 유료 도구를 사용할 수 있습니다. 내가 사용한 그들 중 하나는 Logentries입니다
좋은 점은 Logentries가 React Native Module 도 가지고 있다는 것입니다 . 따라서 모바일 앱으로 런타임 로깅을 활성화하는 데 시간이 덜 걸립니다.
약 한 달 전에 나온 것은 Expo 앱을 사용하여 모바일 기기 (카메라가있는 모든 기기)에서 앱이 실제로 어떻게 생겼는지 보여줄 수있는 멋진 상용구 인 "Create React Native App"입니다. . 라이브 업데이트 가있을 뿐만 아니라 이전에 React Native에서했던 것처럼 브라우저를 사용하지 않고 웹을 개발할 때처럼 터미널에서 콘솔 로그를 볼 수 있습니다 .
물론, 상용구로 새 프로젝트를 만들어야하지만 ... 파일을 마이그레이션해야한다면 문제가되지 않습니다. 기회를주세요.
편집 : 실제로 카메라가 필요하지 않습니다. QR 코드를 스캔하기 위해 QR 코드뿐만 아니라 서버와 동기화 할 무언가를 입력 할 수도 있다고 말했습니다.
로깅 및 redux 저장소에 반응 네이티브 디버거 사용
https://github.com/jhen0409/react-native-debugg
다운로드하여 소프트웨어로 실행 한 다음 시뮬레이터에서 디버그 모드를 활성화하십시오.
크롬 개발자 도구의 요소와 같은 다른 디버깅 기능을 지원하므로 모든 구성 요소에 제공된 스타일을 볼 수 있습니다.
redux 개발 도구에 대한 마지막 완벽한 지원
- 넣어
console.log("My log text")코드에 - 커맨드 라인 도구로 이동
- 개발 폴더에 자신을 배치
안드로이드에서 :
- 이 명령을 작성하십시오 : React-native log-android
iOS에서 :
- 이 명령을 작성하십시오 : React-native log-ios
두 가지 방법 으로이 작업을 수행 할 수 있습니다
1> 경고를 사용하여
console.warn("somthing " +this.state.Some_Sates_of_variables);
2> 경고를 사용하여 경고에 도달하면 매번 좋지 않습니다. 따라서 팝을 열 때마다 반복을 수행하면 이것을 사용하는 것이 바람직하지 않습니다
Import the {Alert} from 'react-native'
// use this alert
Alert.alert("somthing " +this.state.Some_Sates_of_variables);
반응 네이티브로 디버깅하는이 문제에 직면 한 모든 개발자는 내가 직면 했음에도 불구 하고이 참조 및 솔루션은 초기 수준에서 충분하며 우리에게 편안한 것을 시도하고 사용하는 데 도움이되는 몇 가지 방법을 다룹니다.
- console.log로 디버깅
- Nuclide로 코드 디버깅 (논리)
- Chrome으로 코드 디버깅 (logic)
- Xcode를 사용하여 GUI 디버깅
https://codeburst.io/react-native-debugging-tools-3a24e4e40e4
Reactotron도 사용할 수 있으며 로깅보다 더 많은 기능을 제공합니다. https://github.com/infinitered/reactotron
이것을 달성하는 몇 가지 방법이 있습니다. 당신이 사용할 수있는:
console.log개발 도구, Android Studio 및 Xcode의 원격 디버깅 옵션을 선택하지 않고 로깅 문을 봅니다. 또는 원격 디버깅 옵션을 선택 취소하고 chrome dev 도구 또는 vscode 또는 디버깅을 지원하는 다른 편집기에서 로깅을 볼 수 있으므로 프로세스 전체가 느려질 수 있으므로주의해야합니다.- 사용할 수는
console.warn있지만 상황에 따라 가능하지 않을 수도있는 이상한 노란색 상자가 모바일 화면에 쇄도합니다. - 내가 만난 가장 효과적인 방법은 타사 도구 인 Reactotron 을 사용하는 것 입니다. 서로 다른 수준 (오류, 디버그, 경고 등)의 각 로깅 문을 볼 수있는 간단하고 구성하기 쉬운 도구입니다. 성능 저하없이 앱의 모든 로깅을 표시하는 GUI 도구를 제공합니다.
일반적으로 디버깅이 필요한 두 가지 시나리오가 있습니다.
데이터와 관련된 문제에 직면하여 데이터를 확인하고 그 경우 데이터와 관련된 디버깅을 원할 때
console.log('data::',data)js를 원격으로 디버그하는 것이 가장 좋습니다.
다른 경우는 UI와 스타일 관련 문제인데,이 경우 구성 요소의 스타일을 확인해야합니다. react-dev-tools가 최선의 옵션입니다.