Como fazer logon no React Native?

345

Como posso registrar uma variável no React Native, como usar console.logao desenvolver para a web?

skyline75489
fonte
Experimente o pacote - react -native-log-ios npm npm, ele funciona imediatamente sem a depuração remota de JS.
Bobby

Respostas:

325

console.log trabalho.

Por padrão, no iOS, ele faz logon no painel de depuração dentro do Xcode.

No simulador IOS, pressione ( + D) e pressione Remote JS Debugging . Isso abrirá um recurso, http: // localhost: 8081 / debugger-ui no localhost. A partir daí, use o console javascript das ferramentas do desenvolvedor do Chrome para visualizarconsole.log

Yinfeng
fonte
47
E como imprimir o log do console no Android usando o atom para React Native?
sandy
3
@sandy Veja esta resposta . Não é especificamente para Atom, mas pode ser usado em não XCode (aka não MacOS) desenvolvimento
alexdriedger
21
Observe que a partir do React Native 0.29 e posterior, você pode obter logs sem executar o depurador. Apenas execute react-native log-ios ou react-native log-android na linha de comando dentro da pasta do projeto.
Martin Konicek
11
E quando você abre a Depuração JS remota, precisa pressionar a opção + comando + i e verificar o console. Informações totalmente necessárias que estavam faltando e me confundiram.
Sudo #
11
lembre-se de console.log na versão de produção do seu aplicativo pode travar seu aplicativo no ios. portanto, verifique se o ambiente está em desenvolvimento; você pode conhecê-lo pela variável global DEV em reagir nativo.
Yash Ojha
347

Use console.log, console.warnetc.

No React Native 0.29, você pode simplesmente executar o seguinte para ver os logs no console:

$ react-native log-ios
$ react-native log-android
Martin Konicek
fonte
2
Isso é muito útil, pois iniciar o depurador faz animações slooooow.
Jcollum
13
Isto não está a funcionar. Recebo essa mensagem quando executo react-native log-ios evelopers-Mac-mini com.apple.CoreSimulator.SimDevice.02C1B6C7-2CD2-406E-AC93-DD430E5E3C69 [948] (com.apple.videosubscriptionsd) <Notice>: o serviço foi executado apenas por 0 segundos. Empurrando o respawn por 10 segundos.
Rtwsthi 11/0118
@rptwsthi Eu tenho o mesmo problema. Você conseguiu resolver isso?
Ben
2
@ Denis Kniazhev Eu não acho que exista uma opção para registrar apenas erros, mas você pode filtrar a saída. Se você estiver no Mac ou Linux: react-native log-android | grep "meu filtro para erros".
Martin Konicek
11
console.warn me ajudou a verificar certas preocupações.
Madhavi Jayasinghe
39

Antes da React Native 0.29, execute isto no console:

adb logcat *:S ReactNative:V ReactNativeJS:V

Post React Native 0.29, execute:

react-native log-ios

ou

react-native log-android

Como Martin disse em outra resposta.

Isso mostra todos os console.log (), erros, notas etc. e causa o abrandamento do zero.

Joe
fonte
3
+1 para esta opção simples. Acabei usando um comando ligeiramente variante (depois de ler o manual fino) para obter também os horários:adb logcat -v time -s ReactNativeJS
spechter 14/02
Manter a guia de depuração em segundo plano produz lag. A solução é manter a guia em primeiro plano ou abri-la em uma nova janela.
Sabbir 09/04
Eu tenho usado Reagir Native Debugger durante meses e é a melhor opção para evitar o atraso Sabbir disse: github.com/jhen0409/react-native-debugger
Fran Verona
36

Usar console.debug("text");

Você verá os logs dentro do terminal.

Passos:

  • Execute o aplicativo:
react-native run-ios        # For iOS
react-native run-android    # For Android
  • Execute o logger:
react-native log-ios        # For iOS
react-native log-android    # For Android
omprakash8080
fonte
2
alguma maneira de filtrar apenas do console.log?
Não funciona para mim, apenas vejo mensagens de log genéricas do React Native, como Initializing React Xplat Bridge..
Philipp Ludwig
21

O Visual Studio Code possui um console de depuração decente que pode mostrar seu console.log.

insira a descrição da imagem aqui

O código VS é, na maioria das vezes, React Native friendly.

goodhyun
fonte
6
Você pode elaborar mais sobre como o VS Code pode receber a saída de depuração do react-native. Obrigado!
Mike123 20/05
Selecione 'Debug JS' no seu aplicativo no dispositivo e 'Alternar console de depuração (shift-command-y)' no menu de exibição no VS Code. Você precisa do github.com/Microsoft/vscode-react-native .
Goodhyun #
19

É aqui que as Ferramentas do desenvolvedor do Chrome são seus amigos.

As etapas a seguir devem levar você às Ferramentas do desenvolvedor do Chrome, onde você poderá ver suas console.logdeclarações.

Passos

  1. Instale o Google Chrome , se você ainda não tiver
  2. Execute o aplicativo usando react-native run-androidoureact-native run-ios
  3. Abra o menu do desenvolvedor
    • Mac: ⌘+D para iOS ou ⌘MAndroid iOS
    • Windows / Linux: Agite o telefone Android
  4. Selecione Debug JS Remotely
  5. Isso deve iniciar o depurador no Chrome
  6. No Chrome: Tools -> More Tools -> Developer Optionse verifique se você está na consoleguia

Agora, sempre que uma console.loginstrução é executada, ela deve aparecer no Chrome Dev Tools. A documentação oficial está aqui .

alexdriedger
fonte
2
Isso pode diminuir o desempenho do aplicativo durante o desenvolvimento.
Andrien Pecson 19/10/19
17

Existem três métodos que eu uso para depurar ao desenvolver aplicativos React Native:

  1. console.log(): mostra no console
  2. console.warn(): mostra na caixa amarela na parte inferior do aplicativo
  3. alert(): aparece como um prompt, exatamente como na Web
Omar Samman
fonte
6

Prefiro recomendar a vocês o uso do React Native Debugger. Você pode fazer o download e instalá-lo usando este comando.

brew update && brew cask install react-native-debugger

ou

Basta verificar o link abaixo.

https://github.com/jhen0409/react-native-debugger

Feliz Hacking!

Daniel Agus Sidabutar
fonte
Estou usando isso no lugar do padrão startIsso abrirá o Depurador como o depurador padrão, em vez do Chrome, e o -gsinalizador impedirá que o foco seja redirecionado para recarregamentos. "start": "env REACT_DEBUGGER=\"$([ -d '/Applications/React Native Debugger.app' ] && echo \"open -g 'rndebugger://set-debugger-loc?host=localhost&port=8081' --args\")\" node node_modules/react-native/local-cli/cli.js start"
escamosa
3

Eu tive o mesmo problema: as mensagens do console não estavam aparecendo na área de depuração do XCode. No meu aplicativo, fiz o cmd-d para abrir o menu de depuração e lembrei que havia ativado "Debug in Safari".

Eu desliguei isso e algumas mensagens foram impressas na mensagem de saída, mas não nas mensagens do console. No entanto, uma das mensagens de log dizia:

__DEV__ === false, development-level warning are OFF, performance optimizations are ON"

Isso ocorreu porque eu já havia agrupado meu projeto para teste em um dispositivo real com o comando:

react-native bundle --minify

Isso empacotou sem o "modo dev" ativado. Para permitir mensagens de desenvolvimento, inclua o sinalizador --dev:

react-native bundle --dev

E as mensagens do console.log estão de volta! Se você não está empacotando para um dispositivo real, não se esqueça de re-ponto jsCodeLocationem AppDelegate.mque localhost (eu!).

Sr. Orador
fonte
3

Pressione [command + control + Z] no Xcode Simulator, escolha Debug JS remotamente e pressione [command + option + J] para abrir as ferramentas de desenvolvedor do Chrome.

Xcode Simulator Img

consulte: Depurando Reagir Aplicativos Nativos

bocai
fonte
3

É tão simples obter logs no React-Native

Use console.log e console.warn

console.log('character', parameter)

console.warn('character', parameter)

Esse log você pode visualizar no console do navegador. Se você deseja verificar o log do dispositivo ou dizer o log APK de produção, pode usar

adb logcat

adb -d logcat
jatin.7744
fonte
Tudo aparece no ADB, exceto pelas instruções console.loge console.warn.
Andrew Koster
Sim @AndrewKoster Concordo com você, podemos visualizar todos os logs com o ADB, mas isso fornece registros de dispositivos aqui, a consulta está relacionada ao registro de um desenvolvimento da web. O ADB fornece registros do dispositivo, assim você pode controlar e verificar as configurações do dispositivo. Você pode coletar informações no link abaixo dos comandos do ADB, que podem ajudá-lo durante o desenvolvimento. O que você
precisa saber é que você pode usar o seguinte comando
2

O módulo react -native-xlog que pode ajudá-lo é o Xlog do WeChat para react -native. Isso pode gerar no console Xcode e no arquivo de log, os arquivos de log do Produto podem ajudá-lo a depurar.

Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');
EngsSH
fonte
2

Registro de Tempo de Desenvolvimento

Para o registro do tempo de desenvolvimento, você pode usar console.log () . Uma coisa importante, se você deseja desativar o log no modo de produção, no arquivo Root Js do aplicativo, atribua uma função em branco como esta - console.log = {} Ele desabilitará a publicação de logs inteiros em todo o aplicativo, o que realmente é necessário na produção modo como console.log consome tempo.


Log de tempo de execução

No modo de produção, também é necessário ver os logs quando usuários reais estão usando seu aplicativo em tempo real. Isso ajuda a entender erros, uso e casos indesejados. Existem muitas ferramentas pagas de terceiros disponíveis no mercado para isso. Um deles que eu usei é da Logentries

O bom é que o Logentries também possui o React Native Module . Portanto, levará muito menos tempo para você ativar o log de tempo de execução com seu aplicativo móvel.

bizarro
fonte
2

Algo que surgiu há cerca de um mês é "Criar aplicativo nativo do React", um modelo impressionante que permite que você (com o mínimo de esforço) mostre a aparência do seu aplicativo ao vivo no seu dispositivo móvel (QUALQUER com uma câmera) usando o aplicativo Expo . Ele não apenas possui atualizações ao vivo, mas também permite que você veja os logs do console em seu terminal, exatamente como no desenvolvimento para a Web , em vez de precisar usar o navegador como antes com o React Native.

Obviamente, você teria que criar um novo projeto com esse padrão ... mas se precisar migrar seus arquivos, isso não deve ser um problema. Experimente.

Edit: Na verdade, nem sequer requer uma câmera. Eu disse isso para digitalizar um código QR, mas você também pode digitar algo para sincronizá-lo com o servidor, não apenas um código QR.

Código Ryo
fonte
2

Existem duas opções para depurar ou obter a saída do seu aplicativo nativo de reação ao usar

Emulador ou dispositivo real

Para o primeiro uso do emulador: use

react-native log-android ou react-native log-ios

para obter a saída do log

no dispositivo real. agite seu dispositivo

portanto, o menu virá de onde você seleciona a depuração remota e abrirá essa tela no seu navegador. para que você possa ver sua saída de log na guia console.insira a descrição da imagem aqui

Mudassir Khan
fonte
2

insira a descrição da imagem aquiUse o depurador nativo react para armazenamento de log e redux https://github.com/jhen0409/react-native-debugg

Basta fazer o download e executar como software e ativar o modo Debug no simulador.

Ele suporta outros recursos de depuração, como o elemento nas ferramentas de desenvolvedor do chrome, o que ajuda a ver o estilo fornecido a qualquer componente.

Último suporte completo para ferramentas de redux dev

Rajender Dandyal
fonte
2
  1. Coloque console.log("My log text")seu código
  2. vá para suas ferramentas de linha de comando
  3. posicionar-se em sua pasta de desenvolvimento

No Android:

  • escreva este comando: React-native log-android

No IOS:

  • escreva este comando: React-native log-ios
TRA inocente BI
fonte
1

Você pode usar a opção remote js debugly do seu dispositivo ou simplesmente usar o react -native log-android e o react-native log-ios para ios.

Tanumay Ghosh
fonte
1

console.log () é a maneira mais fácil de depurar seu código, mas precisa ser usado com a função de seta ou bind () ao exibir qualquer estado. Você pode achar o link útil.

Arun kumar
fonte
1

Você pode fazer isso em 2 métodos

1> usando warn

console.warn("somthing " +this.state.Some_Sates_of_variables);

2> Ao usar o Alerta Isso não é bom todas as vezes, se chegar a um alerta, cada vez que o pop será aberto, portanto, se executar um loop, não for preferível usá-lo

Import the {Alert} from 'react-native'
   // use this alert
   Alert.alert("somthing " +this.state.Some_Sates_of_variables);
keerthi c
fonte
1

Usuários com Windows e Android Studio:

Você o encontrará no Logcat no Android Studio. Existem muitas mensagens de registro exibidas aqui, portanto, pode ser mais fácil criar um filtro para "ReactNativeJS", que mostrará apenas as mensagens console.log criadas dentro do aplicativo nativo do reag.

David Hudman
fonte
1

Todos os desenvolvedores que enfrentam esse problema de depuração com o reagente nativo, mesmo eu também enfrentei e refiro isso e a solução é suficiente para mim no nível inicial; ele cobre algumas maneiras que nos ajudam a tentar usar o que estiver à vontade conosco

  1. Depurando com console.log
  2. Código de depuração (lógica) com Nuclide
  3. Código de depuração (lógica) com o Chrome
  4. Use o Xcode para depurar a GUI

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

Chetan Sheladiya
fonte
1

Existem várias maneiras de conseguir isso. Estou listando-as e incluindo contras ao usá-las também. Você pode usar:

  1. console.loge visualize as instruções de logon, sem optar pela opção de depuração remota nas ferramentas de desenvolvimento, Android Studio e Xcode. ou você pode optar pela opção de depuração remota e visualizar o log nas ferramentas de desenvolvimento do Chrome ou no vscode ou em qualquer outro editor que suporte a depuração, você deve ser cauteloso, pois isso atrasará o processo como um todo.
  2. Você pode usar, console.warnmas a tela do seu celular seria inundada com aquelas estranhas caixas amarelas que podem ou não ser viáveis ​​de acordo com a sua situação.
  3. O método mais eficaz que me deparei é usar uma ferramenta de terceiros, o Reactotron . Uma ferramenta simples e fácil de configurar que permite ver cada instrução de registro de diferentes níveis (erro, depuração, aviso etc.). Ele fornece a ferramenta GUI que mostra todo o log do seu aplicativo sem diminuir o desempenho.
Anus Kaleem
fonte
1

Você usa a mesma coisa que é usada na Web comum. O consolecomando também funciona neste caso. Por exemplo, você pode usar console.log(), console.warn(), console.clear()etc.

Você pode usar o Chrome Developer para usar o consolecomando ao fazer logon enquanto executa o aplicativo React Native.

zixuan
fonte
0

console.log() é a melhor e mais simples maneira de ver seu console de logon quando você usa o depurador js remoto no menu do desenvolvedor

Nirali Vasoya
fonte
0

O Chrome Devtool é a melhor e mais fácil maneira de registrar e depurar.

akshay gore
fonte
0

Se você estiver no osx e estiver usando um emulador, poderá ver seus console.logs diretamente no safari web inspector.

Safari => Desenvolvimento => Simulador - [sua versão do simulador aqui] => JSContext

Paulin Trognon
fonte
0

Normalmente, existem dois cenários em que precisamos de depuração.

  1. Quando enfrentamos problemas relacionados a dados e queremos verificar nossos dados e depuração relacionados a dados nesse caso console.log('data::',data)

    e debug js remotamente é a melhor opção.

  2. Outro caso são os problemas relacionados à interface do usuário e aos estilos, nos quais precisamos verificar o estilo do componente. Nesse caso, o react-dev-tools é a melhor opção.

    os dois métodos mencionados aqui.

Waheed Akhtar
fonte
0

console.log pode ser usado para qualquer projeto JS. Se você estiver executando o aplicativo no localhost, obviamente ele será semelhante a qualquer projeto javascript. Mas enquanto estiver usando o simulador ou qualquer outro dispositivo, conecte esse simulador ao nosso host local e podemos ver no console.

Thamizhselvan
fonte