ไม่สามารถเชื่อมต่อกับดีบักเกอร์ระยะไกล

ฉันใช้ React.JS และเมื่อฉันทำreact-native run-android(เสียบอุปกรณ์ของฉัน) ฉันเห็นหน้าว่าง เมื่อฉันเขย่าอุปกรณ์และเลือกDebug JS Remotelyจากรายการตัวเลือกที่ฉันเห็นหน้าจอต่อไปนี้

FYI:

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 จากระยะไกลเปิดตัว Chrome แต่ไม่ได้เชื่อมต่อกับอุปกรณ์ android โดยปกติแท็บ / หน้าต่าง Chrome ใหม่จะมี URL การแก้ไขข้อบกพร่องอยู่ในแถบที่อยู่ล่วงหน้า แต่ในกรณีนี้แถบที่อยู่นั้นว่างเปล่า หลังจากรอบระยะเวลาการหมดเวลาข้อความแสดงข้อผิดพลาด "ไม่สามารถเชื่อมต่อกับดีบักเกอร์ระยะไกล" ได้แสดงขึ้น ฉันแก้ไขสิ่งนี้ด้วยขั้นตอนต่อไปนี้:

• วิ่ง adb reverse tcp:8081 tcp:8081
• วางhttp://localhost:8081/debugger-uiในช่องที่อยู่ของเบราว์เซอร์ Chrome ของฉัน คุณควรเห็นหน้าจอการดีบักปกติ แต่แอปของคุณจะยังไม่ได้เชื่อมต่อ

ที่ควรแก้ไขปัญหา หากไม่เป็นเช่นนั้นคุณอาจต้องทำตามขั้นตอนเพิ่มเติมดังต่อไปนี้:

• ปิดและถอนการติดตั้งแอพจากอุปกรณ์ Android ของคุณ
• ติดตั้งแอพอีกครั้งด้วย react-native run-android
• เปิดใช้งานการดีบักแบบรีโมทบนแอปของคุณ
• แอปของคุณควรเชื่อมต่อกับดีบักเกอร์แล้ว

ฉันมีปัญหาที่คล้ายกันซึ่งทำให้ฉันมีคำถามนี้ ในการดีบักเกอร์เบราว์เซอร์ของฉันฉันได้รับข้อความแสดงข้อผิดพลาดนี้:

การเข้าถึงการดึงข้อมูลที่ ' http: // localhost: 8081 / index.delta แพลตฟอร์ม = หุ่นยนต์และ dev = true & ลดขนาด = เท็จ? ' จากจุดกำเนิด ' http://127.0.0.1:8081 ' ได้ถูกปิดกั้นโดยนโยบายของ ธ : ไม่มี 'ควบคุมการเข้าถึง -Allow-Origin มีอยู่ในทรัพยากรที่ร้องขอ หากการตอบกลับทึบแสงตอบสนองความต้องการของคุณให้ตั้งค่าโหมดคำขอเป็น 'no-cors' เพื่อดึงข้อมูลทรัพยากรโดยปิดการใช้งาน CORS

ฉันใช้เวลาสักครู่เพื่อรู้ว่าฉันกำลังใช้127.0.0.1:8081แทนlocalhost:8081debugger ของฉัน

ในการแก้ไขปัญหาฉันต้องเปลี่ยน Chrome จาก:

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

ถึง

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

ตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์โหนดเพื่อจัดเตรียมบันเดิลกำลังทำงานในพื้นหลัง ในการเริ่มต้นใช้งานเซิร์ฟเวอร์npm startหรือreact-native startเปิดแท็บค้างไว้ในระหว่างการพัฒนา

กรณีของฉันคือเมื่อฉันแตะเปิดใช้งานการดีบัก JS ระยะไกลมันจะเปิด Chrome แต่ไม่สามารถเชื่อมต่อได้

ฉันพยายามวิ่งแล้ว:

adb reverse tcp:8081 tcp:8081 

แต่ไม่ได้ผล

ฉันถอนการติดตั้ง chrome ทั้งหมดและติดตั้ง Chrome ตัวใหม่ และมันใช้งานได้

1. react-native start - รีเซ็ตแคช ในหนึ่งแท็บและreact-native run-android ในอีกแท็บหนึ่ง
2. adb reverse tcp: 8081 tcp: 8081 (เพื่อให้คุณสามารถเพิ่มลงในสคริปต์ของคุณและเพียงแค่รันการรันเส้นด้าย adb-reverse )
3. หากคุณใช้แอนดรอยด์แทนที่จะเขย่าโทรศัพท์ คำสั่ง adb

ดังนั้นคุณสามารถเรียกใช้:

• คีย์การ์ดอินพุตของเชลล์ adb 82 ( ตัวเลือกเมนู )
• adb shell inputevevent 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 / , จบการทำงานแบบอ่านปฏิกิริยาพื้นเมือง-run-android หากคุณยังไม่ได้ลองอีกครั้ง

รวมคำตอบที่น่าประทับใจทั้งหมดที่นักพัฒนาผู้เชี่ยวชาญ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