Como você depura o React Native?

266

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

McG
fonte
Além dessas respostas, se você estiver trabalhando no código VS e quiser depurar nele, e não no Chrome, verifique minha resposta
gprathour
Por favor, siga este blog. medium.com/javascript-in-plain-english/…
Tunvir Rahman Tusher

Respostas:

159

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 .

xanadont
fonte
8
Usando o simulador v8.2, o Cmd + D parece não fazer nada. O Chrome é o mais recente. É necessário algum plugin especial no chrome ou um proxy?
McG 27/03
5
Obtendo "O depurador do Websocket não está disponível. Você esqueceu de incluir o RCTWebSocketExecutor?". : /
Tyler McGinnis
1
Eu tive o seguinte erro: /Users/Serge/projects/serge/MyProject/node_modules/react-native/packager/launchChromeDevTools.applescript:668:671: erro de script: Nome da classe esperado, mas propriedade encontrada. (-2741). Descobri que, se eu desativasse o compartilhamento de aplicativos do Windows com o Mac no Parallels, ele começaria a funcionar. Consulte stackoverflow.com/questions/29310936/… .
Serge van den Oever 27/03
5
Isso vai ser Cmd+Mno OS X e Android
escamosa
2
Observe que Cmd + D não fará nada se sua Configuração de Compilação estiver definida como "Release" - verifique se está definida como "Debug".
jwinn 13/09/19
79

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.
Jiuhong Deng
fonte
Essa resposta basicamente copia o documento, que é um começo, mas não especialmente esclarecedor. O que significa "depurar normalmente" neste contexto?
GreenAsJade
6
Nota importante: o React Developer Tools não trabalha com o React Native há meses e ainda precisa ser corrigido. Mais informações aqui: github.com/facebook/react-devtools/issues/229
Lane Rettig
Quem disse que isso está no mac?
Shinzou
@shinzou está implícito na menção de um simulador (é simulador para desenvolvedores iOS, emulador para desenvolvedores Android). Sim, eu sei que tem sido um tempo, mas ainda assim, apenas FWIW
Konrad Morawski
58

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
John Lim
fonte
5
Finalmente encontrei uma solução Android, obrigado! E na versão mais recente, o debug in chromeé substituído por start debug remotely.
MewX
@MewX Você poderia nos informar como fazer isso? 🤔
Mo.
@Muhammed Oi, você poderia simplesmente seguir cmd + mou ctrl + m, e selecione start debug remotelya partir das janelas pop-up em seu simulador
MewX
31

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

drikoda
fonte
Você! Era disso que eu precisava! Valeu amigo!
I_am_learning_now 19/06
27

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 insira a descrição da imagem aqui

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.

bpsourav21
fonte
existe um iOS equivalente a este comando? Eu só recentemente começou com RN e isso iria ajudar muito no futuro
Juan Carlos Alpizar Chinchilla
26

insira a descrição da imagem aqui

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.

Roubar
fonte
Posso visualizar o valor de variável específica através deste depurador? Eu tentei console.log(url), mas não consigo encontrar onde está a saída.
QuarK
24

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:

Reagir opções de depuração nativas

Mais detalhes aqui.

bigtex777
fonte
Não vejo essas opções ... :(
Noah
16

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

BdN3504
fonte
14

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.

chinloong
fonte
12

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.

imagem

Priyanga
fonte
10
adb logcat *:S ReactNative:V ReactNativeJS:V

execute isso no terminal para log do android.

nagasundaram I
fonte
osx: adb logcat '*: S' ReactNative: V ReactNativeJS: V
mbunch
9

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: CONFIGURAÇÃO CORRE

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

Conheça Patel
fonte
9

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.

Naveen Vignesh
fonte
8

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')

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

insira a descrição da imagem aqui

  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

insira a descrição da imagem aqui

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

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

Sameera Chathuranga
fonte
6

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.

McG
fonte
6

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

Sujeesh Balan
fonte
5

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 .

micksabox
fonte
5

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

Olcay Ertaş
fonte
Em lugar específico eu devo colocar essas 4 linhas? No App.js ou index.js?
Julien Lamarche
@JulienLamarche Coloque em App.js
Olcay Ertaş
que deve ser aceito como resposta .... por que também acreditar em comandos .....
Tushar Pandey
4

Muito simples, apenas dois comandos

For IOS $ react-native log-ios
For Android $ react-native log-android
Abhijit Chakra
fonte
é assim que eu faço!
Zach Cook
Esta é uma ótima maneira de ver o que está acontecendo com sua loja
Daan
4

Supondo que você queira mostrar este menu no emulador do Android insira a descrição da imagem aqui

  • 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. insira a descrição da imagem aqui

  • 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

insira a descrição da imagem aqui

  • E tente novamente ⌘+m.

  • Espero que isso ajude, funcionou para mim.

Nkokhelox
fonte
4

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.

Nunchucks
fonte
4

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

Hardik Virani
fonte
3
  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

Krishnendu Bhattacharyya
fonte
3

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. ;)

Youcef EL KAMEL
fonte
Obrigado! Estávamos usando o RN 0.59, que não parecia ser compatível com o Flipper.
chichilatte 16/06
3

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)

jatin.7744
fonte
1
Boa explicação.
Narendra Solanki 29/03
3

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

insira a descrição da imagem aqui

Etapa 4: selecioneDeveloper Tools.

insira a descrição da imagem aqui

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: insira a descrição da imagem aqui 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 !!

Aishwarya
fonte
3

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
Hussam Kurd
fonte
3

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

insira a descrição da imagem aqui

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

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

insira a descrição da imagem aqui

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

Jinsung Sunwoo
fonte
2

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.

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

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

MJ Studio
fonte
Temos que instalar manualmente o Flipper? Ou é fornecido com o React Native de alguma forma? Se sim, como abrimos?
Charanor
@Charanor eu instalei usando o guia de atualização nativa react ao atualizar para 0,62
MJ Studio