Como fazer logon no React Native?

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

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

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

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.

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

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

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

É 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 .

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

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!

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

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

É 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

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

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.

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.

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.

Use 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

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

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.

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.

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

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.

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

Você também pode usar o Reactotron, ele fornecerá muito mais funcionalidade do que apenas registrar. https://github.com/infinitered/reactotron

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.

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.

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

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

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

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.

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.