Como depurar o código do React com o React Native enquanto o aplicativo está sendo executado no simulador de aplicativos?
266
Como depurar o código do React com o React Native enquanto o aplicativo está sendo executado no simulador de aplicativos?
Respostas:
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 .
fonte
Cmd+M
no OS X e AndroidDepurando aplicativos nativos do React
Para depurar o código javascript do seu aplicativo de reação, faça o seguinte:
Command + D
e uma página da web deve abrir em http: // localhost: 8081 / debugger-ui . (Chrome apenas por enquanto) ou use oShake Gesture
Command + Option + I
para abrir as ferramentas do desenvolvedor do Chrome ou abra-o viaView
->Developer
->Developer Tools
.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
React
guia quando as ferramentas do desenvolvedor estiverem abertas.Recarga ao vivo
Para ativar o Live Reload, faça o seguinte:
Control + Command + Z
.Enable/Disable Live Reload
,Reload
eEnable/Disable Debugging
opções.fonte
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.CMD + m
clicando em debug in chromefonte
debug in chrome
é substituído porstart debug remotely
.cmd + m
ouctrl + m
, e selecionestart debug remotely
a partir das janelas pop-up em seu simuladorAlém das outras respostas. Você pode depurar reagir nativo usando a instrução debugger
exemplo:
Suas ferramentas de desenvolvimento do Chrome devem estar abertas para que isso funcione
fonte
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)
ele exibirá uma tela como a imagem
então selecione
ele abrirá automaticamente uma nova janela. em seguida, abra o elemento de inspeção ou pressione F12 para o console.
fonte
Experimente este programa: https://github.com/jhen0409/react-native-debugger
Funciona em:
windows
,osx
elinux
.Ele suporta:
react native
eredux
Você também pode inspecionar a árvore de componentes virtuais e modificar os estilos que são refletidos no aplicativo.
fonte
console.log(url)
, mas não consigo encontrar onde está a saída.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.
fonte
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
fonte
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.
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.
console.log('yeah, seriously.')
Acho que prefiro deixar o programa rodar e registrar algumas informações do que adicionar um
debugger
ponto 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.)Enable Chrome Debugging
comdebugger;
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.
fonte
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.
fonte
execute isso no terminal para log do android.
fonte
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.
fonte
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.
fonte
Para mim, a melhor maneira de depurar no React-Native é usando "Reactotron" .
Instale o Reactotron e adicione-o ao seu package.json:
Agora, é apenas a questão de fazer login no seu código. por exemplo:
console.tron.log('debug')
fonte
Vá para as fontes no menu superior e encontre o arquivo da classe js no explorador de arquivos do lado direito
Você pode colocar pontos de interrupção na visualização e depurar o código lá, como você pode ver na imagem.
fonte
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.
fonte
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
fonte
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 .
fonte
Se você deseja ativar a depuração por padrão:
Para que isso funcione no Android:
Referência: inicie um aplicativo React Native com "Debug JS Remotely" ativado por padrão
fonte
Muito simples, apenas dois comandos
fonte
Supondo que você queira mostrar este menu no emulador do Android
Em seguida, tente
⌘+m
abrir 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 to
caixa de combinação / lista suspensa, selecione aEmulator controls (default)
opçãoE tente novamente
⌘+m
.Espero que isso ajude, funcionou para mim.
fonte
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.
fonte
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
fonte
Se você estiver usando emulador, use Ctrl+ M& simulator Cmd+D
Clique no botão - Debug js remotamente
Google Chrome vá para o console
fonte
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. ;)
fonte
Na depuração React-Native é muito mais fácil.
fonte
Etapa 1: local
debugger
onde você deseja interromper o script, como:Isso fará uma pausa no depurador sempre que houver controle sobre esse bloco de código.
Etapa 2: pressione
Cmd+D
no emulador ios eCmd+M
no 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 blogEtapa 3: selecione
Enable Remote JS Debugging
, isso abrirá o ChromeEtapa 4: selecione
Developer Tools.
Etapa 5: seu depurador é pausado na
Sources
guia, onde quer que você tenha escritodebugger
no 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 !!
fonte
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:
fonte
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! :)
fonte
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.
fonte