Tidak dapat terhubung dengan debugger jarak jauh

Saya menggunakan React.JS dan ketika saya melakukannya react-native run-android(dengan perangkat saya terhubung) saya melihat halaman kosong. Ketika saya mengguncang perangkat dan memilih Debug JS Remotelydari daftar opsi saya melihat layar berikut.

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

Dalam kasus saya masalahnya adalah bahwa emulator membuat permintaan untuk:

http://10.0.2.2:8081/debugger-ui

dari pada:

http://localhost:8081/debugger-ui dan permintaan itu gagal.

Untuk mengatasi masalah ini: Sebelum mengaktifkan debugging jarak jauh pada emulator Anda , buka http://localhost:8081/debugger-uidi chrome. Kemudian aktifkan debugging jarak jauh dan kembali ke halaman chrome di mana Anda akan melihat log konsol Anda.

Memecahkan masalah berikut:

• Tekan Cmd + Mpada layar emulator
• Pergi ke Dev settings > Debug server host & port for device
• Set localhost:8081
• Jalankan kembali aplikasi android: react-native run-android

Debugger terhubung sekarang!

Saya menyelesaikannya dengan melakukan adb reverse tcp:8081 tcp:8081dan kemudian reloaddi telepon saya.

Dalam kasus saya, memilih Debug JS Remotely meluncurkan Chrome, tetapi tidak terhubung dengan perangkat android. Biasanya, tab / jendela Chrome baru akan memiliki URL debugging pra-diisi di bilah alamat, tetapi dalam hal ini bilah alamat kosong. Setelah periode waktu habis, pesan kesalahan "Tidak dapat terhubung dengan debugger jarak jauh" ditampilkan. Saya memperbaikinya dengan prosedur berikut:

• Lari adb reverse tcp:8081 tcp:8081
• Rekatkan http://localhost:8081/debugger-uike bidang alamat browser Chrome saya. Anda akan melihat layar debugging normal tetapi aplikasi Anda masih tidak akan terhubung.

Itu harus memperbaiki masalah. Jika tidak, Anda mungkin perlu mengambil langkah-langkah tambahan berikut:

• Tutup dan copot pemasangan aplikasi dari perangkat Android Anda
• Instal ulang aplikasi dengan react-native run-android
• Aktifkan debugging jarak jauh pada aplikasi Anda.
• Aplikasi Anda sekarang harus terhubung ke debugger.

Saya memiliki masalah serupa yang mengarahkan saya ke pertanyaan ini. Di debugger browser saya, saya menerima pesan kesalahan ini:

Akses untuk mengambil di ' http: // localhost: 8081 / index.delta? Platform = android & dev = true & minify = false ' from origin ' http://127.0.0.1:8081 ' telah diblokir oleh kebijakan CORS: Tidak ada 'Akses-Kontrol Header-Allow-Origin hadir pada sumber yang diminta. Jika respons buram memenuhi kebutuhan Anda, atur mode permintaan ke 'no-cors' untuk mengambil sumber daya dengan CORS dinonaktifkan.

Butuh beberapa saat untuk menyadari bahwa saya menggunakan 127.0.0.1:8081bukanlocalhost:8081 untuk debugger saya.

Untuk memperbaikinya, saya cukup mengubah Chrome dari:

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

untuk

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

Pastikan bahwa server simpul untuk menyediakan bundel berjalan di latar belakang. Untuk menjalankan mulai gunakan server npm startatau react-native startdan biarkan tab terbuka selama pengembangan

Kasus saya adalah bahwa ketika saya mengetuk mengaktifkan JS debugging jarak jauh, itu akan meluncurkan chrome, tetapi tidak dapat terhubung.

Saya sudah mencoba menjalankan:

adb reverse tcp:8081 tcp:8081 

, berhasil tetapi tidak berhasil.

Saya mencopot krom saya sepenuhnya dan menginstal yang baru. Dan itu berhasil.

1. mulai-asli mulai --reset-cache di satu tab dan bereaksi asli-lari-android di lain
2. adb reverse tcp: 8081 tcp: 8081 (jadi Anda bisa menambahkannya ke skrip Anda dan jalankan saja menjalankan benang jalankan adb-reverse )
3. Jika Anda menggunakan Android, Alih-alih menggoyangkan ponsel Anda, tip yang bagus adalah menjalankan perintah adb.

Jadi Anda dapat menjalankan:

• adb shell input keyevent 82 ( opsi menu )
• adb shell key keyventvent 46 46 ( reload )

Jawaban lain di sini hilang satu langkah penting bagi saya. Di AndroidManifest.xml saya perlu menambahkan usesCleartextTraffic:

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

Anda mungkin tidak ingin menyimpan ini dalam rilis produksi aplikasi Anda, kecuali jika Anda ingin mendukung permintaan http tidak aman.

Setelah saya menambahkan ini ke AndroidManifest.xml saya, kemudian saya mengikuti jawaban Tom Aranda, dan emulator akhirnya dapat terhubung ke debugger.

Saya melakukan jawaban @ wajib dan menggunakan skrip ini untuk mengarahkan ulang port:

#!/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 🚧"

uninstall aplikasi Anda, kemudian jalankan react-native run-android. kemudian klik debugging end di chrome ganti http: // localhost: 8081 / debugger-ui / , end run react-native run-android. jika Anda masih belum berhasil coba lagi

Termasuk semua jawaban yang mengesankan khusus pengembang ahli Ribamar Santos , jika Anda tidak membuatnya berfungsi, Anda harus memeriksa sesuatu yang lebih rumit!

Sesuatu seperti Airplane modetelepon Anda (yang ditiru)! Atau network status of Emulator( Data status and Voice status on Cellular tab of Emulator configuration) Anda yang mungkin dimanipulasi untuk tidak mengekspresikan jaringan! untuk beberapa kebutuhan persaingan!

Saya telah mengatasi masalah ini dengan trik ini! Itu debug yang agak menakjubkan untuk menemukan lubang ini!

dalam kasus saya itu juga perlu menginstal paket npm itu

begitu

npm install react-native-debugger -g

Coba tambahkan ini

package.json

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

Hentikan semuanya.

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

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