Não foi possível conectar-se ao depurador remoto

Estou usando o React.JS e, quando o faço react-native run-android(com o dispositivo conectado), vejo uma página em branco. Quando agito o dispositivo e seleciono Debug JS Remotelyna lista de opções, vejo a seguinte tela.

PARA SUA INFORMAÇÃO:

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

No meu caso, o problema era que o emulador estava fazendo uma solicitação para:

http://10.0.2.2:8081/debugger-ui

ao invés de:

http://localhost:8081/debugger-ui e a solicitação estava falhando.

Para resolver o problema: Antes de ativar a depuração remota no emulador , abra http://localhost:8081/debugger-uino chrome. Em seguida, ative a depuração remota e volte para a página chrome, onde você verá os logs do console.

Resolvido o problema a seguir:

• Pressione Cmd + Mna tela do emulador
• Vamos para Dev settings > Debug server host & port for device
• Conjunto localhost:8081
• Execute novamente o aplicativo Android: react-native run-android

O depurador está conectado agora!

Eu resolvi fazer isso adb reverse tcp:8081 tcp:8081e depois reloadno meu telefone.

No meu caso, selecionar Debug JS Remotamente lançou o Chrome, mas não se conectou ao dispositivo Android. Normalmente, a nova guia / janela do Chrome teria o URL de depuração preenchido previamente na barra de endereços, mas, nesse caso, a barra de endereços estava em branco. Após o período de tempo limite, a mensagem de erro "Não foi possível conectar-se ao depurador remoto" foi exibida. Corrigi isso com o seguinte procedimento:

• Corre adb reverse tcp:8081 tcp:8081
• Cole http://localhost:8081/debugger-uino campo de endereço do meu navegador Chrome. Você deve ver a tela de depuração normal, mas seu aplicativo ainda não estará conectado.

Isso deve resolver o problema. Caso contrário, pode ser necessário executar as seguintes etapas adicionais:

• Feche e desinstale o aplicativo do seu dispositivo Android
• Reinstale o aplicativo com react-native run-android
• Habilite a depuração remota no seu aplicativo.
• Seu aplicativo agora deve estar conectado ao depurador.

Eu tive um problema semelhante que me levou a essa pergunta. No depurador do navegador, eu estava recebendo esta mensagem de erro:

O acesso à busca em ' http: // localhost: 8081 / index.delta? Platform = android & dev = true & minify = false ' da origem ' http://127.0.0.1:8081 ' foi bloqueado pela política do CORS: Não 'Access-Control O cabeçalho -Allow-Origin está presente no recurso solicitado. Se uma resposta opaca atender às suas necessidades, defina o modo da solicitação como 'no-cors' para buscar o recurso com o CORS desativado.

Demorei um pouco para perceber que eu estava usando, em 127.0.0.1:8081vez do localhost:8081meu depurador.

Para corrigi-lo, bastava mudar o Chrome de:

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

para

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

Certifique-se de que o servidor do nó para fornecer o pacote configurável esteja em execução em segundo plano. Para executar, inicie o servidor, use npm startou react-native starte mantenha a guia aberta durante o desenvolvimento

Meu caso é que, quando toco em ativar a depuração remota de JS, ele inicia o chrome, mas não pode se conectar a ele.

Eu tentei executar:

adb reverse tcp:8081 tcp:8081 

, funcionou mas não funcionou.

Desinstalei totalmente o meu chrome e instalei um novo. E isso funciona.

1. react-native start --reset-cache em uma guia e react -native run-android em outra
2. adb reverse tcp: 8081 tcp: 8081 (para que você possa adicioná-lo aos seus scripts e apenas executar yarn run adb-reverse )
3. Se você estiver usando o Android, em vez de agitar o telefone, uma ótima dica é executar os comandos adb.

Então você pode executar:

• evento da chave de entrada do shell adb 82 ( opção de menu )
• evento de chave de entrada do shell adb 46 46 ( recarregar )

As outras respostas aqui estavam faltando um passo crucial para mim. No AndroidManifest.xml, eu precisava adicionar usosCleartextTraffic:

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

Você provavelmente não deseja manter isso na versão de produção do seu aplicativo, a menos que queira oferecer suporte a solicitações http inseguras.

Depois de adicionar isso ao meu AndroidManifest.xml, segui a resposta de Tom Aranda e o emulador finalmente conseguiu conectar-se ao depurador.

Eu respondi à @sajib e usei este script para redirecionar portas:

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

desinstale o aplicativo e execute o react-native run-android. em seguida, clique em debugging end no chrome, substitua http: // localhost: 8081 / debugger-ui / , execute run react-native run-android. se você ainda não conseguiu, tente novamente

Contendo todas as respostas impressionantes Ribamar Santosfornecidas pelos desenvolvedores especialistas , se você não conseguiu, deve verificar algo mais complicado!

Algo parecido Airplane modecom o seu telefone (emulado)! Ou o seu network status of Emulator( Data status and Voice status on Cellular tab of Emulator configuration) que pode ser manipulado para não expressar a rede! para algumas necessidades de emulação!

Eu superei esse problema com esse truque! Foi um pouco de depuração de tirar o fôlego para encontrar esse buraco!

no meu caso, ele também precisa instalar o pacote npm

tão

npm install react-native-debugger -g

Tente adicionar este

package.json

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

Terminar tudo.

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

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