Como é que depura reage nativo?

Cmd+D de dentro do simulador. Vai aparecer o Chrome e a partir daí você pode usar as ferramentas de desenvolvimento.

Editar:

Isto está agora ligado nos documentos de Ajuda .

Depurar Reat Native Apps

Para depurar o código javascript da sua aplicação react, faça o seguinte:

Execute a sua aplicação no simulador iOS.
1. pressione {[0] } e uma página deve abrir-se em http://localhost:8081/debugger-ui (Cromado apenas por agora) ou use o Shake Gesture
2. activarpausa nas excepções capturadas para uma melhor experiência de depuração.
3. Carregue em Command + Option + I para abrir as ferramentas do programador Chrome, ou abra-as através View -> Developer -> Developer Tools.
4. agora deve ser capaz de depurar como normalmente faria.

Facultativo

Instale a extensãoReact Developer Tools para o Google Chrome. Isto permitir-lhe-á navegar na hierarquia de visualização se seleccionar a Página React quando as ferramentas de desenvolvimento estiverem abertas.

Recarregar Ao Vivo

Para activar a recarga ao vivo, faça o seguinte:

Execute a sua aplicação no simulador iOS.
1. Imprensa Control + Command + Z.
2. agora vais ver o Enable/Disable Live Reload, Reload e Enable/Disable Debugging opções.

Para uma aplicação Android, se estiver a usar o Genymotion, poderá comutar o menu se carregar em {[[[0]}, mas poderá ter de o activar no menu Se fizer isto.

• Untick widget
• activar até CMD + m Carregue em depurar no chrome

Além das outras respostas. Você poderá depurar o reat-native com a instrução do depurador

Exemplo:

debugger; //breaks execution

As tuas ferramentas cromadas dev devem estar abertas para isto funcionar

cmd ⌘ + estranhamente, não funcionou para mim. Carregar em ctrl + cmd ⌘ + O Z no simulador iOS arrancou a janela do navegador de depuração para mim.

Mais detalhes aqui.

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

Funciona: windows, osx e linux

Suporta: react native e redux

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

A depuração 0. 40. 0 nativa do Debian 8 (Jessie) pode ser feita navegando até http://localhost:8081/debugger-ui em crómio ou Firebug enquanto a tua aplicação está a correr no simulador android. Para aceder ao menu de desenvolvimento da aplicação, execute o seguinte comando noutra janela de terminal, como indicado AQUI:

adb shell input keyevent 82

1. Recarga ao vivo

   Reat-native faz com que seja super fácil ver as suas alterações com as teclas ⌘ + R ou mesmo activar a recarga ao vivo e o watchman irá "actualizar" o simulador com as últimas alterações. Se você tiver um erro, você pode obter uma pista do número da linha daquele vermelho ecra. Um par de desfazer vai levá-lo de volta ao estado de trabalho e começar de novo.

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

   Acho que prefiro deixar o programa correr e registar algumas informações do que adicionar um ponto de paragem debugger. (depurador duro é útil ao tentar trabalhar com pacotes/bibliotecas externas e vem com completação automática, então você sabe que outros métodos você pode utilizar.)

3. Enable Chrome Debugging com debugger; ponto de ruptura na sua programa.

Bem, depende do tipo de erros que encontrou e das suas preferências de como depurar. Para a maior parte do undefined is not an object (evaluating 'something.something'), os métodos 1 e 2 serão suficientes para mim.

Considerando que lidar com bibliotecas externas ou pacotes escritos por outros programadores irá requerer mais esforço para depurar, daí uma boa ferramenta como Chrome Debugging

Se quiser depurar usando o dispositivo android no Windows, basta abrir uma linha de comandos, então escreva ( certifique-se que o seu adb está a funcionar correctamente)

adb shell input keyevent 82

Ele irá pedir uma tela como a imagem

Depois seleccione

debug JS Remotely

Abre automaticamente uma nova janela.em seguida, abra o elemento inspecionar ou pressione F12 para consola.

1. Execute a sua aplicação no simulador - reat-native run-ios
2. Carregue em ctrl + d e carregue em Depurar js remotamente

1. a página web deve abrir em http://localhost:8081/debugger-ui , Se não escrever o URL e ir para esta ligação no Chrome
2. carregue com o botão direito na página e carregue em inspeccionar e deverá abrir as ferramentas de desenvolvimento para o chrome

1. Ir para as fontes no menu superior e encontre o seu ficheiro de classe js no lado direito do ficheiro explorer

2. Você pode colocar pontos de paragem na janela e depurar o código lá como você pode ver na imagem.

adb logcat *:S ReactNative:V ReactNativeJS:V

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

Instale o Reactotron e depois adicione isto ao seu pacote.json:

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

'Hardware' > Teclado > Ligar O Teclado

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

Ter um espaço na localização do ficheiro impede o Cmd+D do trabalho. Mudei o meu projecto para um local sem espaço e finalmente consegui que o depurador Chrome funcionasse. Parece um insecto.

Assumindo que queres mostrar este menu no emulador Android

• Em seguida, tente ⌘+m mostrar esta janela de configuração do dev no emulador Android num Mac.

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

• E depois tentar novamente.

• Se não aparecer à mesma, então vá para a configuração do emulador em execução e na lista Send keyboard shortcuts to/dropdown e seleccione o Emulator controls (default) Opcao.

• E depois tentar novamente.

• espero que isto ajude, funcionou comigo.

Muito simples apenas dois comandos

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

Se estiver a usar o Microsoft Visual Code, então instale a React Native Tools extension. Então você pode adicionar pontos de ruptura simplesmente clicando no número de linha desejado. Siga estes passos para configurar e depurar a aplicação :

Não se esqueça de activar o Depug js remotamente no emulador se o usar.

Redux Devtools: isto permite-lhe ver as suas acções, e avançar e recuar através delas. Ele também permite que você veja sua loja de redux e tem um recurso para diffar automaticamente o estado anterior com o estado atualizado para cada ação, de modo que você pode ver isso à medida que você vai e vem através de uma série de ações.

React Devtools: isto permite-lhe inspeccionar um determinado componente, nomeadamente todos os seus adereços, bem como o seu estado de componente. Se você tem um pedaço do Estado do componente que é um booleano, ele permite que você clique nele para alterna-lo e ver como seu app reage quando ele muda. Recurso.

O Chrome Devtools permite-lhe ver todas as saídas da sua consola, usar pontos de paragem, pausa no depurador; etc. Funcionalidades padrão de depuração. Se você clicar com o botão direito na área onde suas ações estão listadas em Redux Devtools e selecione 'Permitir a inspeção de rede', você pode então inspecionar suas chamadas API na página de rede de Devtools Chrome que é doce.

Para o Android: Ctrl + M (emulador) ou agitar o telemóvel (no dispositivo) para revelar o menu.

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

No menu revelado seleccione a opção depurar js remotamente.

O cromo será aberto automaticamente em localhost: 8081/depugger-ui. Você também pode ir manualmente para o depurador com esta ligação.

Existe também 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 de dados e há muitas opções.

1. Se você estiver usando o emulador use Ctrl+M & simulador Cmd+D

2. Carregue no-depurar js remotamente

3. Google Chrome ir para a consola

Para depurar a sua aplicação nativa react, basta ir para o seguinte endereço:

Localhost: 8081/depugger-ui no seu navegador predefinido (chrome) e ferramentas de desenvolvimento abertas para depurar o seu aplicativo nativo react

Se usar o Nuclide no editor Atom para o desenvolvimento de aplicações nativas React, Poderá também "Inspector de elementos", o que ajuda a observar os adereços e as alterações dos valores de estado quando a aplicação está a correr no dispositivo em fase de desenvolvimento. Saiba mais aqui - https://nuclide.io/docs/platforms/react-native/#element-inspector indique aqui a descrição da imagem

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

• para depurar no IOS use

Cmd + d

Ctrl + cmd + z (para simulador )

Depurar no android

Agitar o dispositivo com touch ( certifique-se que a sua opção de desenvolvimento está activa )

Em vez de Cmd+M , Para emulador Android Press F10 no Windows. O emulador começa a mostrar todas as opções de depuração 'reat-native'.

No Windows e usando o emulador android pode fazer isto:

1. Depois do emulador estar a correr e da aplicação nele, carregue no botão do Menu e depois seleccione "depurar js remotamente" ou "depurar no Chrome" (depende do emulador que usar). Você pode ver a próxima imagem como referência: emulador com imagem steps
2. irá aparecer uma nova página cromada. Tem de carregar em Ctrl + ⇧J para mostrar as ferramentas de desenvolvimento e começar a seguir os passos de depuração. Veja esta imagem como referência

Além disso, deve usar a funcionalidade {[[0]} para tornar o processo de depuração mais descritivo.

Pode instalar o depurador nativo React do brew. é mais confortável de usar do que depurador no chrome