Uzaktan hata ayıklayıcı ile bağlantı kurulamıyor

React.JS kullanıyorum ve react-native run-android(cihazım takılıyken) boş bir sayfa görüyorum. Cihazı salladığımda ve Debug JS Remotelyseçenek listesinden seçim yaptığımda aşağıdaki ekranı görüyorum.

Bilginize:

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

Benim durumumda, sorun öykünücünün:

http://10.0.2.2:8081/debugger-ui

onun yerine:

http://localhost:8081/debugger-ui ve istek başarısız oldu.

Sorunu çözmek için: Öykünücünüzde uzaktan hata ayıklamayı etkinleştirmeden önce kromda açın http://localhost:8081/debugger-ui. Ardından uzaktan hata ayıklamayı etkinleştirin ve konsol günlüklerinizi görmeniz gereken krom sayfasına dönün.

Aşağıdaki sorunu çözdü:

• Basın Cmd + MEmülatör ekranına
• Adresine git Dev settings > Debug server host & port for device
• Ayarlamak localhost:8081
• Android uygulamasını tekrar çalıştırın: react-native run-android

Hata ayıklayıcı şimdi bağlandı!

Yaptım adb reverse tcp:8081 tcp:8081ve sonra reloadtelefonumda çözdüm.

Benim durumumda, Debug JS'yi seçmek Chrome'u uzaktan başlattı, ancak android cihazla bağlantı kurmadı. Normalde, yeni Chrome sekmesi / penceresinde adres çubuğunda hata ayıklama URL'si önceden doldurulur, ancak bu durumda adres çubuğu boştur. Zaman aşımı süresinden sonra "Uzak hata ayıklayıcıya bağlanılamıyor" hata iletisi görüntülendi. Bunu aşağıdaki prosedürle düzelttim:

• Çalıştırmak adb reverse tcp:8081 tcp:8081
• http://localhost:8081/debugger-uiChrome tarayıcımın adres alanına yapıştırın . Normal hata ayıklama ekranını görmelisiniz, ancak uygulamanız yine de bağlı olmayacak.

Bu sorunu çözmeli. Değilse, aşağıdaki ek adımları atmanız gerekebilir:

• Uygulamayı Android cihazınızdan kapatın ve kaldırın
• Uygulamayı şununla yeniden yükle: react-native run-android
• Uygulamanızda uzaktan hata ayıklamayı etkinleştirin.
• Uygulamanız artık hata ayıklayıcıya bağlı olmalıdır.

Beni bu soruya yönlendiren benzer bir sorunum vardı. Tarayıcı hata ayıklayıcımda şu hata mesajını alıyordum:

' Http: // localhost: 8081 / index.delta? Platform = android & dev = true & minify = false ' kaynağından getirme erişimi ' http://127.0.0.1:8081 ' CORS politikası tarafından engellendi: Hayır 'Erişim Denetimi -Allow-Origin 'başlığı istenen kaynakta mevcut. Opak bir yanıt gereksinimlerinizi karşılıyorsa, kaynağı CORS devre dışı bırakılmış olarak getirmek için isteğin modunu 'korse' olarak ayarlayın.

Hata ayıklayıcı 127.0.0.1:8081yerine kullanmakta olduğumu fark etmem biraz zaman aldı localhost:8081.

Düzeltmek için Chrome'u şu şekilde değiştirmek zorunda kaldım:

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

için

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

Paketi sağlayacak düğüm sunucusunun arka planda çalıştığından emin olun. Çalıştırmak için sunucuyu kullanın npm startveya react-native startgeliştirme sırasında sekmeyi açık tutun

Benim durumum, uzak JS hata ayıklamasını etkinleştir'e dokunduğumda, krom başlatacak, ancak ona bağlanamıyor.

Koşmaya çalıştım:

adb reverse tcp:8081 tcp:8081 

, ama işe yaramadı.

Kromumu tamamen kaldırdım ve yenisini taktım. Ve çalışıyor.

1. reaksiyonu-yerel başlatma - bir sekmede sıfırla-önbellek ve diğerinde tepki-yerel çalıştırma-android
2. adb reverse tcp: 8081 tcp: 8081 (böylece komut dosyalarınıza ekleyebilir ve sadece iplik çalıştırmayı çalıştırabilirsiniz adb-reverse )
3. Android kullanıyorsanız, telefonunuzu sallamak yerine büyük bir ipucu adb komutlarını çalıştırır .

Böylece koşabilirsiniz:

• adb kabuk girişi keyevent 82 ( menü seçeneği )
• adb kabuk girişi keyevent 46 46 ( yeniden yükle )

Buradaki diğer cevaplar benim için önemli bir adımı attı. AndroidManifest.xml'de, useCleartextTraffic eklemek için gerekli:

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

Güvenli olmayan http isteklerini desteklemek istemiyorsanız, muhtemelen bunu uygulamanızın üretim sürümünde tutmak istemezsiniz.

Bunu AndroidManifest.xml'e ekledikten sonra Tom Aranda'nın cevabını takip ettim ve emülatör sonunda hata ayıklayıcıya bağlanabildi.

@Sajib s cevap yaptım ve bağlantı noktaları yeniden yönlendirmek için bu komut dosyası kullanılır:

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

Uygulamanızı kaldırın, ardından reat-native run-android'i çalıştırın. daha sonra http: // localhost: 8081 / debugger-ui / , end run reat-native run-android yerine chrome'da hata ayıklama sonuna tıklayın . eğer hala başaramadıysanız tekrar deneyin

Uzman geliştiricilere özel olarak tüm etkileyici cevapları vermek Ribamar Santos sağladığı , eğer işe yaramadıysanız, daha zor bir şey kontrol etmelisiniz!

Airplane mode(Emüle edilmiş) telefonunuz gibi bir şey ! Veya ağınızı ifade etmemek için manipüle edilebilecek network status of Emulator( Data status and Voice status on Cellular tab of Emulator configuration) cihazınız! bazı emülasyon ihtiyaçları için!

Bu hile ile bu sorunun üstesinden geldim! Bu deliği bulmak biraz nefes kesici bir hata ayıklamasıydı!

benim durumumda da npm paketi yüklemesi gerekiyor

yani

npm install react-native-debugger -g

Bunu eklemeyi deneyin

package.json

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

Her şeyi sonlandır.

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

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