Impossibile connettersi con il debugger remoto

Sto usando React.JS e quando lo faccio react-native run-android(con il mio dispositivo collegato) vedo una pagina vuota. Quando scuoto il dispositivo e seleziono Debug JS Remotelydalla lista delle opzioni vedo la seguente schermata.

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

Nel mio caso il problema era che l'emulatore stava facendo una richiesta per:

http://10.0.2.2:8081/debugger-ui

invece di:

http://localhost:8081/debugger-ui e la richiesta falliva.

Per risolvere il problema: prima di abilitare il debug remoto sull'emulatore , aprire http://localhost:8081/debugger-uiin Chrome. Quindi abilita il debug remoto e torna alla pagina di Chrome dove dovresti vedere i log della tua console.

Risolto il problema seguente:

• Premere Cmd + Msullo schermo dell'emulatore
• Vai a Dev settings > Debug server host & port for device
• Impostato localhost:8081
• Rieseguire l'app Android: react-native run-android

Il debugger è ora connesso!

L'ho risolto facendo adb reverse tcp:8081 tcp:8081e poi reloadsul mio telefono.

Nel mio caso, la selezione di Debug JS ha avviato in remoto Chrome, ma non si è connesso con il dispositivo Android. Normalmente, la nuova scheda / finestra di Chrome avrebbe l'URL di debug precompilato nella barra degli indirizzi, ma in questo caso la barra degli indirizzi era vuota. Dopo il periodo di timeout, è stato visualizzato il messaggio di errore "Impossibile connettersi con il debugger remoto". Ho risolto questo problema con la seguente procedura:

• Correre adb reverse tcp:8081 tcp:8081
• Incolla http://localhost:8081/debugger-uinel campo dell'indirizzo del mio browser Chrome. Dovresti vedere la normale schermata di debug ma la tua app non sarà ancora connessa.

Questo dovrebbe risolvere il problema. In caso contrario, potrebbe essere necessario eseguire i seguenti passaggi aggiuntivi:

• Chiudi e disinstalla l'app dal tuo dispositivo Android
• Reinstalla l'app con react-native run-android
• Abilita il debug remoto sulla tua app.
• L'app dovrebbe ora essere connessa al debugger.

Ho avuto un problema simile che mi ha portato a questa domanda. Nel mio debugger del browser ho visualizzato questo messaggio di errore:

L'accesso al recupero su " http: // localhost: 8081 / index.delta? Platform = android & dev = true & minify = false " dall'origine " http://127.0.0.1:8081 " è stato bloccato dalla politica CORS: No "Access-Control -Llow-Origin 'header è presente sulla risorsa richiesta. Se una risposta opaca soddisfa le tue esigenze, imposta la modalità della richiesta su "no-cors" per recuperare la risorsa con CORS disabilitato.

Mi ci è voluto un po 'per capire che stavo usando al 127.0.0.1:8081posto del localhost:8081mio debugger.

Per risolverlo, ho semplicemente dovuto cambiare Chrome da:

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

per

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

Assicurarsi che il server nodo per fornire il bundle sia in esecuzione in background. Per eseguire avviare il server utilizzare npm starto react-native starte mantenere la scheda aperta durante lo sviluppo

Il mio caso è che quando tocco abilita il debug JS remoto, avvierà Chrome, ma non riesco a connettermi ad esso.

Ho provato a correre:

adb reverse tcp:8081 tcp:8081 

, ha funzionato ma non ha funzionato.

Ho disinstallato totalmente il mio Chrome e ne ho installato uno nuovo. E funziona

1. avvii-native start --reset-cache in una scheda e reazioni -native run-android in un'altra
2. adb reverse tcp: 8081 tcp: 8081 (in modo da poterlo aggiungere ai tuoi script ed eseguire solo il thread esegui adb-reverse )
3. Se stai usando Android, invece di scuotere il telefono un ottimo consiglio è eseguire i comandi adb.

Quindi puoi eseguire:

• keybent input 82 della shell adb ( opzione di menu )
• keybent di input della shell adb 46 46 ( ricaricare )

Le altre risposte qui mancavano un passo cruciale per me. In AndroidManifest.xml avevo bisogno di aggiungere usiCleartextTraffic:

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

Probabilmente non vorrai mantenerlo nella versione di produzione della tua app, a meno che tu non voglia supportare richieste http non sicure.

Dopo averlo aggiunto al mio AndroidManifest.xml, ho seguito la risposta di Tom Aranda e l'emulatore è stato finalmente in grado di connettersi al debugger.

Ho fatto la risposta di @sajib e ho usato questo script per reindirizzare le porte:

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

disinstallare l'applicazione, quindi eseguire run-android reattivo-nativo. quindi fare clic su debug end in chrome sostituire http: // localhost: 8081 / debugger-ui / , end run reagisce-nativo run-android. se ancora non ci sei riuscito riprova

Incontrando tutte le risposte impressionanti Ribamar Santosfornite dagli sviluppatori esperti , se non lo hai fatto funzionare, devi controllare qualcosa di più complicato!

Qualcosa del tipo Airplane modedel tuo telefono (emulato)! O il tuo network status of Emulator( Data status and Voice status on Cellular tab of Emulator configuration) che potrebbe essere manipolato per non esprimere la rete! per alcune esigenze di emulazione!

Ho superato questo problema con questo trucco! È stato un po 'strabiliante il debug per trovare questo buco!

nel mio caso deve anche installare il suo pacchetto npm

così

npm install react-native-debugger -g

Prova ad aggiungere questo

package.json

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

Termina tutto.

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

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