Como é que depura reage nativo?
como é que se depura o seu código de reacção com o Reat Native enquanto o aplicativo está a correr no simulador de aplicações?
30 answers
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.
- pressione {[0] } e uma página deve abrir-se em http://localhost:8081/debugger-ui (Cromado apenas por agora) ou use o
Shake Gesture
- activarpausa nas excepções capturadas para uma melhor experiência de depuração.
- Carregue em
Command + Option + I
para abrir as ferramentas do programador Chrome, ou abra-as atravésView
->Developer
->Developer Tools
. - 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.
- Imprensa
Control + Command + Z
. - agora vais ver o
Enable/Disable Live Reload
,Reload
eEnable/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.
Este é o ecrã que aparece: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
-
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.
-
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.) Enable Chrome Debugging
comdebugger;
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.
- Execute a sua aplicação no simulador - reat-native run-ios
- Carregue em ctrl + d e carregue em Depurar js remotamente
- 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
- carregue com o botão direito na página e carregue em inspeccionar e deverá abrir as ferramentas de desenvolvimento para o chrome
Ir para as fontes no menu superior e encontre o seu ficheiro de classe js no lado direito do ficheiro explorer
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
Passa isto no terminal para o registo do android.
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",
Agora, é só a questão de registar o seu código.
= = referências = = : console.tron.log('debug')
'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 oEmulator 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 concluir, ter tudo isto num só lugar é fantástico! Se não precisar de um deles, pode ligá-lo ou desligá-lo. Obtenha o depurador nativo React e aproveite a vida.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
Certifica-te que tens cromo.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.
Há o reveal console e você pode ver registros sendo anotados.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.
Vai dar uma vista de olhos que é muito útil. ;)Se você estiver usando o emulador use Ctrl+M & simulador Cmd+D
Carregue no-depurar js remotamente
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:
- 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
- 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