원격 디버거와 연결할 수 없습니다

React.JS를 사용하고 있으며 react-native run-android(장치가 연결된 상태에서) 빈 페이지가 표시됩니다. 장치를 흔들고 Debug JS Remotely옵션 목록에서 선택 하면 다음 화면이 표시됩니다.

참고 사항 :

OS: Ubuntu 16.04
Node version is: v4.6.2
java version "1.8.0_111"
react": "15.4.1
react-native": "0.38.0

필자의 경우 문제는 에뮬레이터가 다음을 요청한다는 것입니다.

http://10.0.2.2:8081/debugger-ui

대신에:

http://localhost:8081/debugger-ui 요청이 실패했습니다.

문제를 해결하려면 에뮬레이터 에서 원격 디버깅을 활성화하기 전에http://localhost:8081/debugger-ui 크롬으로 엽니 다 . 그런 다음 원격 디버깅을 활성화하고 콘솔 로그가 표시되는 크롬 페이지로 돌아갑니다.

다음과 같은 문제를 해결했습니다.

• Cmd + M에뮬레이터 화면에서 누르십시오
• 이동 Dev settings > Debug server host & port for device
• 세트 localhost:8081
• Android 앱을 다시 실행하십시오. react-native run-android

디버거가 연결되었습니다!

나는이 일을 해결 adb reverse tcp:8081 tcp:8081다음과 reload내 전화에.

필자의 경우 Debug JS Remote를 선택하면 Chrome이 시작되었지만 안드로이드 장치와 연결되지 않았습니다. 일반적으로 새 Chrome 탭 / 창은 주소 표시 줄에 디버깅 URL이 미리 채워져 있지만이 경우 주소 표시 줄은 비어 있습니다. 시간 초과 기간이 지나면 "원격 디버거로 연결할 수 없습니다"오류 메시지가 표시되었습니다. 나는 다음 절차로 이것을 고쳤다.

• 운영 adb reverse tcp:8081 tcp:8081
• http://localhost:8081/debugger-uiChrome 브라우저의 주소 입력란에 붙여 넣 습니다. 정상적인 디버깅 화면이 표시되지만 앱이 여전히 연결되지 않습니다.

문제를 해결해야합니다. 그렇지 않은 경우 다음 추가 단계를 수행해야합니다.

• Android 기기에서 앱을 닫고 제거
• 로 앱을 다시 설치하십시오. react-native run-android
• 앱에서 원격 디버깅을 활성화하십시오.
• 이제 앱이 디버거에 연결되어 있어야합니다.

나는이 문제로 이어지는 비슷한 문제가있었습니다. 브라우저 디버거에서 다음 오류 메시지가 나타납니다.

CORS 정책에 의해 ' http://127.0.0.1:8081 '의 ' http : // localhost : 8081 / index.delta? platform = android & dev = true & minify = false '에서 가져 오기에 대한 액세스 가 CORS 정책에 의해 차단되었습니다 : 아니요 '액세스 제어 요청 된 리소스에 -Allow-Origin '헤더가 있습니다. 불투명 한 응답이 사용자의 요구를 충족시키는 경우 요청 모드를 'no-cors'로 설정하여 CORS가 비활성화 된 상태에서 리소스를 가져옵니다.

내가 127.0.0.1:8081대신 사용하고 있음을 깨닫는 데 시간이 걸렸습니다.localhost:8081디버거 .

문제를 해결하기 위해 Chrome을 다음과 같이 변경해야했습니다.

http://127.0.0.1:8081/debugger-ui/

에

http://localhost:8081/debugger-ui/

번들을 제공 할 노드 서버가 백그라운드에서 실행 중인지 확인하십시오. 서버 사용을 시작 npm start하거나 react-native start개발 중에 탭을 열어 두려면

내 경우는 원격 JS 디버깅 사용을 탭하면 크롬이 시작되지만 연결할 수는 없다는 것입니다.

나는 달리려고 노력했다.

adb reverse tcp:8081 tcp:8081 

작동했지만 작동하지 않았습니다.

크롬을 완전히 제거하고 새 크롬을 설치했습니다. 그리고 작동합니다.

1. 반응 네이티브 시작-재설정-캐시 한 탭에서 하고 다른 탭에서는 반응 네이티브 실행 안드로이드
2. adb reverse tcp : 8081 tcp : 8081 (따라서 스크립트에 추가하고 실행할 수 있습니다) 원사 실행 adb-reverse를 실행할 )
3. 안드로이드를 사용하는 경우 전화를 흔들지 않고 adb 명령을 실행하는 것이 좋습니다 .

따라서 다음을 실행할 수 있습니다.

• adb shell input keyevent 82 ( 메뉴 옵션 )
• adb shell input keyevent 46 46 ( 다시로드 )

여기에있는 다른 대답은 나에게 중요한 단계가 누락되었습니다. AndroidManifest.xml에서 usesCleartextTraffic을 추가해야했습니다.

    <application
      ...
      android:usesCleartextTraffic="true">

안전하지 않은 http 요청을 지원하지 않는 한 앱의 프로덕션 릴리스에서 이것을 유지하고 싶지 않을 것입니다.

이것을 AndroidManifest.xml에 추가 한 후 Tom Aranda의 답변을 따르고 에뮬레이터가 마침내 디버거에 연결할 수있었습니다.

@sajib 대답 하고이 스크립트를 사용하여 포트를 리디렉션합니다.

#!/usr/bin/env bash

# packager
adb reverse tcp:8081 tcp:8081
adb -d reverse tcp:8081 tcp:8081
adb -e reverse tcp:8081 tcp:8081

echo "🚧 React Native Packager Redirected 🚧"

응용 프로그램을 제거한 다음 react-native run-android를 실행하십시오. 그런 다음 크롬에서 디버깅 끝을 클릭하십시오 .http : // localhost : 8081 / debugger-ui /를 대체 하십시오 . 여전히 성공하지 못하면 다시 시도하십시오

전문 개발자가 특별히 Ribamar Santos제공 한 모든 인상적인 답변을 제공합니다. 작동하지 않으면 더 까다로운 것을 확인해야합니다!

Airplane mode당신의 (에뮬레이트 된) 전화 와 같은 것 ! 또는 네트워크를 표현하지 않기 위해 조작 될 수있는 귀하의 network status of Emulator( Data status and Voice status on Cellular tab of Emulator configuration)! 일부 에뮬레이션 요구에!

이 트릭 으로이 문제를 극복했습니다! 이 구멍을 찾는 것은 약간 숨막히는 디버그였습니다!

내 경우에는 npm 패키지도 설치해야합니다.

그래서

npm install react-native-debugger -g

이것을 추가하십시오

package.json

devDependencies: {
//...    
    "@react-native-community/cli-debugger-ui": "4.7.0"
}

모든 것을 종료하십시오.

• npm install
• npx react-native start
• npx react-native run-android

참조 : https://github.com/react-native-community/cli/issues/1081#issuecomment-614223917