Como depurar o código do React com o React Native enquanto o aplicativo está sendo executado no simulador de aplicativos?

Cmd+Dde dentro do simulador. Irá aparecer o Chrome e, a partir daí, você poderá usar as Ferramentas do desenvolvedor.

Editar:

Agora isso está vinculado nos documentos de ajuda .

Depurando aplicativos nativos do React

Para depurar o código javascript do seu aplicativo de reação, faça o seguinte:

1. Execute seu aplicativo no simulador do iOS.
2. Pressione Command + De uma página da web deve abrir em http: // localhost: 8081 / debugger-ui . (Chrome apenas por enquanto) ou use oShake Gesture
3. Ative as exceções de pausa nas capturas para obter uma melhor experiência de depuração.
4. Pressione Command + Option + Ipara abrir as ferramentas do desenvolvedor do Chrome ou abra-o via View-> Developer-> Developer Tools.
5. Agora você deve conseguir depurar como faria normalmente.

Opcional

Instale a extensão React Developer Tools para o Google Chrome. Isso permitirá que você navegue na hierarquia da visualização se você selecionar a Reactguia quando as ferramentas do desenvolvedor estiverem abertas.

Recarga ao vivo

Para ativar o Live Reload, faça o seguinte:

1. Execute seu aplicativo no simulador do iOS.
2. Pressione Control + Command + Z.
3. Você vai ver agora as Enable/Disable Live Reload, Reloade Enable/Disable Debuggingopções.

Para um aplicativo Android, se você estiver usando o Genymotion, poderá alternar o menu pressionando CMD + m, mas pode ser necessário ativá-lo no menu.

• Desmarcar widget
• Ative-o CMD + mclicando em debug in chrome

Além das outras respostas. Você pode depurar reagir nativo usando a instrução debugger

exemplo:

debugger; //breaks execution

Suas ferramentas de desenvolvimento do Chrome devem estar abertas para que isso funcione

se você deseja depurar usando o dispositivo Android no Windows, basta abrir um prompt de comando e digite (verifique se o seu adb está funcionando corretamente)

adb shell input keyevent 82

ele exibirá uma tela como a imagem

então selecione

debug JS Remotely

ele abrirá automaticamente uma nova janela. em seguida, abra o elemento de inspeção ou pressione F12 para o console.

Experimente este programa: https://github.com/jhen0409/react-native-debugger

Funciona em: windows, osxe linux.

Ele suporta: react nativeeredux

Você também pode inspecionar a árvore de componentes virtuais e modificar os estilos que são refletidos no aplicativo.

cmd ⌘+ Destranhamente não funcionou para mim. Pressionar ctrl+ cmd ⌘+ Zno simulador do iOS abriu a janela do navegador de depuração para mim.

Esta é a tela que aparece:

Mais detalhes aqui.

A depuração do react-native 0.40.0 no Debian 8 (Jessie) pode ser feita navegando para http: // localhost: 8081 / debugger-ui no Chromium ou Firebug enquanto o aplicativo está sendo executado no simulador do Android. Para acessar o menu do desenvolvedor no aplicativo, execute o seguinte comando em outra janela do terminal, conforme indicado aqui :

adb shell input keyevent 82

Não tenho reputação suficiente para comentar as respostas anteriores, que são ótimas. :) Aqui estão algumas das maneiras pelas quais estou depurando ao desenvolver o aplicativo nativo de reação.

1. Recarregamento ao vivo

   O react-native torna super fácil ver suas alterações com as teclas R + R ou até mesmo ativar a recarga ao vivo e o watchman "atualiza" o simulador com as alterações mais recentes. Se você receber um erro, poderá obter uma pista do número da linha nessa tela vermelha. Alguns desfazer retornarão ao estado de funcionamento e começarão novamente.

2. console.log('yeah, seriously.')

   Acho que prefiro deixar o programa rodar e registrar algumas informações do que adicionar um debuggerponto de interrupção. (o depurador difícil é útil ao tentar trabalhar com pacotes / bibliotecas externas e é fornecido com preenchimento automático, para que você saiba quais outros métodos você pode utilizar.)

3. Enable Chrome Debuggingcom debugger;ponto de interrupção no seu programa.

Bem, isso depende do tipo de erro que você encontrou e de suas preferências de como depurar. Para a maioria undefined is not an object (evaluating 'something.something'), os métodos 1 e 2 serão bons o suficiente para mim.

Considerando que lidar com bibliotecas externas ou pacotes escritos por outros desenvolvedores exigirá mais esforço para depurar, portanto, uma boa ferramenta como Chrome Debugging

Às vezes, é proveniente da própria plataforma nativa do reator, portanto pesquisar no Google por questões nativas do reator definitivamente ajudará.

Espero que isto seja útil a alguém.

Em vez de Cmd+M, para Android Emulator Pressione F10no Windows. O emulador começa a mostrar todas as opções de depuração react-native.

adb logcat *:S ReactNative:V ReactNativeJS:V

execute isso no terminal para log do android.

Se você estiver usando o Microsoft Visual Code, instale a extensão React Native Tools. Depois, você pode adicionar pontos de interrupção simplesmente clicando no número da linha desejada. Siga estas etapas para configurar e depurar o aplicativo:

Não se esqueça de ativar o Debug JS Remotamente no emulador, se você estiver usando.

Para Android: Ctrl + M (emulador) ou Agite o telefone (No dispositivo) para exibir o menu.

Para iOS: Cmd + D ou Agite o telefone para revelar o menu

Verifique se você tem cromo.

No menu revelado, selecione Debug JS Remotely Option.

O Chrome será aberto automaticamente em localhost: 8081 / debugger-ui. Você também pode ir manualmente para o depurador com este link.

Há revelar console e você pode ver os logs sendo anotados.

Para mim, a melhor maneira de depurar no React-Native é usando "Reactotron" .

Instale o Reactotron e adicione-o ao seu package.json:

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2", 

Agora, é apenas a questão de fazer login no seu código. por exemplo:console.tron.log('debug')

1. Execute seu aplicativo no simulador - react-native run-ios
2. Pressione ctrl + de clique em Debug JS Remotamente

1. A página da Web deve abrir em http: // localhost: 8081 / debugger-ui , se não digitar a URL e acessar este link no Chrome
2. Clique com o botão direito do mouse na página e clique em Inspecionar. Deverá abrir as ferramentas de desenvolvedor do chrome

3. Vá para as fontes no menu superior e encontre o arquivo da classe js no explorador de arquivos do lado direito

4. Você pode colocar pontos de interrupção na visualização e depurar o código lá, como você pode ver na imagem.

Por padrão, meu simulador ios não estava captando as teclas, e é por isso que o cmd-D não funcionou. Eu tive que ativar as configurações do teclado usando o menu do simulador:

Hardware> Teclado> Conectar Teclado

Agora o cmd-D inicia a depuração do chrome.

Para o aplicativo Android. Pressione Ctrl + M, selecione debug js remotamente, abrirá uma nova janela no chrome com o URL http: // localhost: 8081 / debugger-ui . Agora você pode depurar o aplicativo no navegador Chrome

Ter um espaço no caminho do arquivo impede que o Cmd+ Dfuncione. Mudei meu projeto para um local sem espaço e finalmente consegui que o depurador do Chrome funcionasse. Parece um bug .

Se você deseja ativar a depuração por padrão:

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

Para que isso funcione no Android:

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

Referência: inicie um aplicativo React Native com "Debug JS Remotely" ativado por padrão

Muito simples, apenas dois comandos

For IOS $ react-native log-ios
For Android $ react-native log-android

Supondo que você queira mostrar este menu no emulador do Android

• Em seguida, tente ⌘+mabrir a caixa de diálogo de configurações do desenvolvedor no emulador do Android em um Mac.

• Se não aparecer, vá para AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box.

• E tente novamente ⌘+m.

• Se ele ainda não aparecer, vá para as configurações do emulador em execução e, na Send keyboard shortcuts tocaixa de combinação / lista suspensa, selecione a Emulator controls (default)opção

• E tente novamente ⌘+m.

• Espero que isso ajude, funcionou para mim.

Se você estiver usando o Redux, recomendo o React Native Debugger. Ele inclui as ferramentas do Chrome, mas também as ferramentas Redux e React.

Redux Devtools : Isso permite que você visualize suas ações e e por elas. Ele também permite que você exiba seu repositório redux e possui um recurso para diferenciar automaticamente o estado anterior com o estado atualizado de cada ação, para que você possa ver isso à medida que avança e recua através de uma série de ações.

React Devtools : Isso permite que você inspecione um determinado componente, a saber, todos os seus adereços e seu estado. Se você possui uma parte do estado do componente que é um booleano, permite clicar nele para alterná-lo e ver como o aplicativo reage quando ele é alterado. Ótimo recurso.

Ferramentas do Chrome Permite ver todas as saídas do console, usar pontos de interrupção, pausar no depurador; Recursos de depuração padrão. Se você clicar com o botão direito do mouse na área em que suas ações estão listadas no Redux Devtools e selecionar 'Permitir inspeção de rede', poderá inspecionar suas chamadas de API na guia rede do Chrome Devtools, o que é interessante.

Em conclusão, ter tudo isso em um só lugar é fantástico! Se você não precisar de um deles, você pode ativar / desativar. Obtenha o React Native Debugger e aproveite a vida.

Essa é a maneira alternativa de usar o aplicativo de depurador nativo react.

você pode baixar o aplicativo usando o link abaixo. É um aplicativo muito bom para gerenciar o repositório redux junto com o código-fonte.

debugger-native-react

agora também nos dias em que você pode usar o link abaixo diretamente para ajudá-lo.

chrome-developer-tools

1. Se você estiver usando emulador, use Ctrl+ M& simulator Cmd+D

2. Clique no botão - Debug js remotamente

3. Google Chrome vá para o console

Também existe um nome de depurador muito bom, Reactotron. https://github.com/infinitered/reactotron

Você não precisa estar no modo de depuração para ver algum valor dos dados e há muitas opções.

vá dar uma olhada que é realmente útil. ;)

Na depuração React-Native é muito mais fácil.

• Para depurar no IOS, use

cmd + d

ctrl + cmd + z (para simulador)

• Para depurar no android

Agite o dispositivo com toque (verifique se a opção de desenvolvedor está ativada)

Etapa 1: local debuggeronde você deseja interromper o script, como:

  async saveItem(item, selectedValue) {
    debugger
    try {
        await AsyncStorage.setItem(item, selectedValue);
    }
    catch (error) {
        console.error('AsyncStorage error: ' + error.message);
    }
}

Isso fará uma pausa no depurador sempre que houver controle sobre esse bloco de código.

Etapa 2: pressione Cmd+Dno emulador ios e Cmd+Mno simulador Android . Se você está usando um dispositivo real, agite o dispositivo para abrir o menu dev, se não quiser agitar o dispositivo, siga este blog

Etapa 3: selecione Enable Remote JS Debugging, isso abrirá o Chrome

Etapa 4: selecioneDeveloper Tools.

Etapa 5: seu depurador é pausado na Sourcesguia, onde quer que você tenha escrito debuggerno seu código. Vá para o console e digite os parâmetros que deseja depurar (que estão presentes no bloco de código), como: Para passar para o próximo ponto do depurador, vá novamente para Fontes -> clique no botão Continuar a execução do script (botão azul do canto direito)

Coloque o depurador, onde quer que você queira pausar o script.

Desfrute de depuração !!

Você pode usar o Safari para depurar a versão iOS do seu aplicativo sem precisar habilitar "Depurar JS remotamente", basta seguir as seguintes etapas:

1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger

Primeiro no seu simulador ios, se você pressionar a tecla [command + D], poderá ver esta tela.

Em seguida, clique no botão Debug JS remotamente.

Depois, você poderá ver a página React Native Debugger assim.

E então abra seu inspetor [f12] e vá para a aba console, depure-o! :)

React Native 0.62 Lançado - A solução oficial é o Flipper 🚀

Flipper é uma ferramenta de depuração para dispositivos móveis Android e iOS sem usar o modo de depuração em reagir nativo.

Desde RN 0.62 (veja este link ), o Flipper é inicializado com o projeto padrão.

O Flipper possui alguns plugins para depuração. Os plug-ins incluem Layout, Network,Shared preferences

O maior benefício do Flipper também não são muitos plugins, mas você pode ver o console do dispositivo Android / iOS também depurando facilmente.

O Flipper também alerta sobre falha ou rejeição de rede.

O plug-in de layout inclui o modo de acessibilidade e o modo de destino.

Você também pode ver a solicitação / resposta de rede bruta em seu aplicativo.