앱이 앱 시뮬레이터에서 실행되는 동안 React Native로 React 코드를 어떻게 디버깅합니까?

Cmd+D시뮬레이터 내에서. Chrome이 팝업되고 거기에서 개발자 도구를 사용할 수 있습니다.

편집하다:

이것은 이제 도움말 문서에 연결되어 있습니다.

리 액트 네이티브 앱 디버깅

react 앱의 자바 스크립트 코드를 디버그하려면 다음을 수행하십시오.

1. iOS 시뮬레이터에서 애플리케이션을 실행하십시오.
2. 를 누르면 http : // localhost : 8081 / debugger-ui에Command + D 웹 페이지가 열립니다 . (현재 Chrome 만 해당) 또는Shake Gesture
3. 더 나은 디버깅 환경을 위해 잡힌 예외 일시 중지를 활성화하십시오 .
4. 를 눌러 Command + Option + IChrome 개발자 도구를 열거 나 View-> Developer-> 를 통해 엽니 다 Developer Tools.
5. 이제 평소와 같이 디버깅 할 수 있습니다.

선택 과목

Chrome 용 React Developer Tools 확장을 설치하십시오 . React개발자 도구가 열려있을 때 탭 을 선택하면 뷰 계층 구조를 탐색 할 수 있습니다 .

라이브 리로드

라이브 재로드를 활성화하려면 다음을 수행하십시오.

1. iOS 시뮬레이터에서 애플리케이션을 실행하십시오.
2. 를 누릅니다 Control + Command + Z.
3. 이제 볼 수 Enable/Disable Live Reload, Reload및 Enable/Disable Debugging옵션.

Android 앱의 경우 Genymotion을 사용하는 경우을 눌러 메뉴를 전환 할 수 CMD + m있지만 메뉴에서 메뉴 를 활성화해야 할 수도 있습니다.

• Untick 위젯
• 크롬CMD + m 에서 디버그를 클릭하여 사용하도록 설정

다른 답변 외에도. 디버거 문을 사용하여 반응 네이티브를 디버깅 할 수 있습니다

예:

debugger; //breaks execution

Chrome 개발자 도구가 열려 있어야 작동합니다.

Windows에서 안드로이드 장치를 사용하여 디버그하려면 명령 프롬프트를 열고 다음을 입력하십시오 (adb가 올바르게 작동하는지 확인하십시오)

adb shell input keyevent 82

이미지와 같은 화면이 나타납니다

그런 다음 선택

debug JS Remotely

자동으로 새 창을 연 다음 검사 요소를 열거 나 F12 키를 눌러 콘솔을 엽니 다.

이 프로그램을 사용해보십시오 : https://github.com/jhen0409/react-native-debugger

windows, osx및 에서 작동합니다 linux.

그것은 지원 react native과redux

가상 컴포넌트 트리를 검사하고 앱에 반영된 스타일을 수정할 수도 있습니다.

cmd ⌘+ D이상하게도 효과가 없었습니다. iOS 시뮬레이터에서 ctrl+ cmd ⌘+ Z를 누르면 디버깅 브라우저 창이 시작됩니다.

다음과 같은 화면이 나타납니다.

자세한 내용은 여기를 참조하십시오.

앱이 안드로이드 시뮬레이터에서 실행되는 동안 데비안 8 (Jessie)에서 반응 네이티브 0.40.0 디버깅 은 Chromium 또는 Firebug의 http : // localhost : 8081 / debugger-ui 로 이동하여 수행 할 수 있습니다 . 인앱 개발자 메뉴에 액세스하려면 여기에서 지적한대로 다른 터미널 창에서 다음 명령을 실행 하십시오 .

adb shell input keyevent 82

나는 이전 답변에 대해 언급할만한 평판이 충분하지 않습니다. :) 다음은 반응 네이티브 앱을 개발할 때 디버깅하는 방법 중 일부입니다.

1. 라이브 리로딩

   react-native를 사용하면 ⌘ + R 키로 변경 사항을 매우 쉽게 볼 수 있으며 실시간 새로 고침을 활성화 하기 만하면 워치 맨이 최신 변경 사항으로 시뮬레이터를 "새로 고침"합니다. 오류가 발생하면 해당 빨간색 화면의 줄 번호에서 힌트를 얻을 수 있습니다. 실행 취소하면 작업 상태로 돌아가고 다시 시작할 수 있습니다.

2. console.log('yeah, seriously.')

   debugger브레이크 포인트를 추가하는 것보다 프로그램을 실행하고 정보를 로깅하는 것을 선호 합니다. (강력한 디버거는 외부 패키지 / 라이브러리로 작업하려고 할 때 유용하며 자동 완성 기능과 함께 제공되므로 다른 방법을 활용할 수 있습니다.)

3. Enable Chrome Debugging와 debugger;프로그램에 브레이크 포인트.

글쎄, 그것은 발생한 오류의 유형과 디버깅 방법의 환경 설정에 달려 있습니다. 대부분의 경우 undefined is not an object (evaluating 'something.something')방법 1과 2가 충분합니다.

다른 개발자가 작성한 외부 라이브러리 또는 패키지를 처리하는 데는 디버깅을 위해 더 많은 노력이 필요합니다. Chrome Debugging

때로는 반응 네이티브 플랫폼 자체에서 나오기 때문에 반응 네이티브 문제에 대한 인터넷 검색이 도움이 될 것입니다.

이것이 누군가를 도울 수 있기를 바랍니다.

대신 Windows의 Cmd+MAndroid 에뮬레이터 프레스 F10의 경우. 에뮬레이터가 모든 반응 네이티브 디버그 옵션을 표시하기 시작합니다.

adb logcat *:S ReactNative:V ReactNativeJS:V

안드로이드 로그를 위해 터미널에서 이것을 실행하십시오.

Microsoft Visual Code를 사용하는 경우 React Native Tools 확장을 설치하십시오. 그런 다음 원하는 줄 번호를 클릭하여 중단 점을 추가 할 수 있습니다. 다음 단계에 따라 앱을 설정하고 디버그하십시오.

에뮬레이터에서 디버그 JS 원격을 사용하도록 설정하는 것을 잊지 마십시오.

Android의 경우 : Ctrl + M (에뮬레이터) 또는 전화를 흔들어 (장치에서) 메뉴를 표시하십시오.

iOS의 경우 : Cmd + D 또는 전화를 흔들어 메뉴 표시

크롬이 있는지 확인하십시오.

표시되는 메뉴에서 JS 원격으로 디버그 옵션을 선택하십시오.

Chrome은 localhost : 8081 / debugger-ui에서 자동으로 열립니다. 이 링크를 사용하여 수동으로 디버거로 이동할 수도 있습니다.

콘솔이 표시되고 로그가 기록되는 것을 볼 수 있습니다.

나에게 React-Native를 디버깅하는 가장 좋은 방법은 "Reactotron"을 사용하는 것 입니다.

Reactotron을 설치 한 다음 패키지에 추가하십시오.

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2", 

이제 코드에 로그인 만하면됩니다. 예 :console.tron.log('debug')

1. 시뮬레이터에서 앱 실행-React-Native Run-IOS
2. Ctrl + d를 누르고 Debug JS Remotely를 클릭하십시오.

1. URL을 입력하지 않고 Chrome에서이 링크로 이동하면 웹 페이지가 http : // localhost : 8081 / debugger-ui에 열립니다 .
2. 페이지를 마우스 오른쪽 버튼으로 클릭하고 검사를 클릭하면 크롬 용 개발자 도구가 열립니다.

3. 상단 메뉴의 소스로 이동하여 오른쪽 파일 탐색기에서 js 클래스 파일을 찾으십시오.

4. 이미지에서 볼 수 있듯이 중단 점을 뷰에 넣고 코드를 디버그 할 수 있습니다.

기본적으로 내 iOS 시뮬레이터는 키 입력을 선택하지 않았으므로 cmd-D가 작동하지 않습니다. 시뮬레이터 메뉴를 사용하여 키보드 설정을 켜야했습니다.

하드웨어> 키보드> 키보드 연결

이제 cmd-D는 크롬 디버깅을 시작합니다.

안드로이드 앱의 경우 Ctrl + M을 눌러 디버그 js를 원격으로 선택하면 URL이 http : // localhost : 8081 / debugger-ui 인 크롬에서 새 창이 열립니다 . 이제 크롬 브라우저에서 앱을 디버깅 할 수 있습니다

파일 경로에 공백을 갖는 것은 방지Cmd +를 D작동. 공간이없는 위치로 프로젝트를 옮기고 마침내 Chrome 디버거가 작동하도록했습니다. 버그 인 것 같습니다 .

기본적으로 디버깅을 사용하려면 다음을 수행하십시오.

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

이것을 Android에서 작동 시키려면 :

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

참조 : 기본적으로 "Debug JS Remotely"가 활성화 된 React Native 앱 시작

매우 간단한 두 명령

For IOS $ react-native log-ios
For Android $ react-native log-android

이 메뉴를 Android 에뮬레이터 에 표시한다고 가정합니다.

• 그런 다음 ⌘+mMac의 Android 에뮬레이터 에서이 dev 설정 대화 상자를 팝업하십시오.

• 표시되지 않으면로 이동하십시오 AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box.

• 그리고 다시 시도하십시오 ⌘+m.

• 여전히 표시되지 않으면 실행중인 에뮬레이터 설정으로 이동하고 Send keyboard shortcuts to콤보 상자 / 드롭 다운에서 Emulator controls (default)옵션 을 선택하십시오 .

• 그리고 다시 시도하십시오 ⌘+m.

• 이것이 도움이되기를 바랍니다.

Redux를 사용하는 경우 React Native Debugger를 적극 권장합니다. Chrome devtools가 포함되어 있지만 Redux devtools 및 React devtools도 있습니다.

Redux Devtools : 이것은 당신이 당신의 행동을보고 그것을 통해 앞뒤로 이동할 수있게합니다. 또한 redux store를 볼 수 있으며 각 작업에 대해 업데이트 된 상태로 이전 상태를 자동으로 비교하는 기능이 있으므로 일련의 작업을 앞뒤로 진행할 때이를 확인할 수 있습니다.

React Devtools : 특정 컴포넌트, 즉 모든 소품과 컴포넌트 상태를 검사 할 수 있습니다. 부울 상태 인 구성 요소 상태가있는 경우이를 클릭하여 전환하고 앱이 변경 될 때 반응하는 방식을 확인할 수 있습니다. 훌륭한 기능.

Chrome Devtools 모든 콘솔 출력을보고 중단 점을 사용하며 디버거에서 일시 중지 할 수 있습니다. 등 표준 디버깅 기능. Redux Devtools에서 작업이 나열된 영역을 마우스 오른쪽 버튼으로 클릭하고 '네트워크 검사 허용'을 선택하면 Chrome Devtools의 네트워크 탭에서 API 호출을 검사 할 수 있습니다.

결론적으로이 모든 것을 한 곳에 두는 것이 환상적입니다! 그중 하나가 필요하지 않으면 켜거나 끌 수 있습니다. React Native Debugger를 받고 인생을 즐기십시오.

리 액트 네이티브 디버거 응용 프로그램을 사용하는 다른 방법입니다.

아래 링크를 사용하여 응용 프로그램을 다운로드 할 수 있습니다. 소스 코드와 함께 redux store를 관리하는 데 매우 유용한 응용 프로그램입니다.

반응 네이티브 디버거

또한 지금 당신은 당신을 돕기 위해 아래 링크를 직접 사용할 수 있습니다.

크롬 개발자 도구

1. 에뮬레이터를 사용하는 경우 Ctrl+ M& 시뮬레이터 Cmd+D

2. -원격으로 js 디버그를 클릭하십시오.

3. Chrome은 콘솔로 이동

Reactotron이라는 훌륭한 디버거 이름도 있습니다. https://github.com/infinitered/reactotron

일부 데이터 값을보기 위해 디버그 모드에 있지 않아도되며 많은 옵션이 있습니다.

정말 유용한 모양으로 가십시오. ;)

React-Native 디버깅이 훨씬 쉽습니다.

• IOS에서 디버깅하려면

cmd + d

ctrl + cmd + z (시뮬레이터의 경우)

• 안드로이드에서 디버그하기

터치로 기기 흔들기 (개발자 옵션이 활성화되어 있는지 확인)

1 단계 : 장소 debugger는 중지 스크립트와 같은 원하는 적 :

  async saveItem(item, selectedValue) {
    debugger
    try {
        await AsyncStorage.setItem(item, selectedValue);
    }
    catch (error) {
        console.error('AsyncStorage error: ' + error.message);
    }
}

이 코드 블록을 제어 할 때 디버거가 일시 중지됩니다.

2 단계 : 보도 Cmd+D에 IOS 에뮬레이터 와 Cmd+M에 안드로이드 시뮬레이터 . 실제 장치가있는 경우 장치를 흔들어 dev 메뉴를 열거 나 장치를 흔들지 않으려면 이 블로그를 따르십시오.

3 단계 :을 선택 Enable Remote JS Debugging하면 Chrome이 열립니다.

4 단계 : 선택Developer Tools.

5 단계 : 코드 내에서 Sources작성한 곳마다 탭 에서 디버거가 일시 중지됩니다 debugger. 콘솔로 이동하여 코드 블록에 존재하는 디버깅하려는 매개 변수를 입력하십시오. 다음 디버거 지점으로 다시 이동하려면 소스로 이동하십시오-> 스크립트 실행 다시 시작 버튼을 클릭하십시오 (오른쪽 파란색 버튼)

스크립트를 일시 중지하려는 위치에 디버거를 배치하십시오.

디버깅을 즐기십시오 !!

Safari를 사용하여 "Debug JS Remotely"를 활성화하지 않고도 앱의 iOS 버전을 디버깅 할 수 있습니다. 다음 단계를 따르십시오.

1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger

iOS 시뮬레이터에서 먼저 [command + D] 키를 누르면이 화면이 표시됩니다.

그런 다음 디버그 JS 원격 버튼을 클릭하십시오.

그런 후 React Native Debugger 페이지가 표시 될 수 있습니다.

그리고 인스펙터 [f12]를 열고 콘솔 탭으로 가서 디버그하십시오! :)

React Native 0.62 출시- 공식 솔루션은 Flipper입니다.

Flipper 는 반응 네이티브에서 디버그 모드를 사용하지 않는 Android 및 iOS Mobile 디버깅 도구입니다.

RN 0.62 이후 (이 링크 참조 ) Flipper 는 기본 프로젝트로 초기화됩니다.

Flipper에는 디버깅을위한 몇 가지 플러그인이 있습니다. 플러그인을 포함 Layout, Network,Shared preferences

Flipper의 가장 큰 장점은 많은 플러그인이 아니라 Android / iOS 기기 콘솔 디버깅도 쉽게 볼 수 있다는 것입니다.

Flipper는 충돌 또는 네트워크 거부에 대해서도 경고합니다.

레이아웃 플러그인은 접근성 모드와 대상 모드를 포함합니다.

응용 프로그램에서 원시 네트워크 요청 / 응답을 볼 수도 있습니다.