Como fazer o log in React Native?

Use console.log, console.warn etc.

A partir do Reagir Nativo 0.29 você pode simplesmente executar o seguinte para ver os logs no console:

$ react-native log-ios
$ react-native log-Android

Pré Reagir Nativo 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 faz com que zero seja lento.

Use 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 tem um console de depuração decente que pode mostrar seu console.log.

VS Code é, mais frequentemente do que não, React nativa amigável.

É aqui que Chrome Developer Tools é seu amigo.

Os passos seguintes devem levá-lo às Ferramentas do programador do Chrome, onde poderá ver as suas instruções console.log.

Passos

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

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

Eu prefiro recomendar vocês usando o Reagir Native Debugger. Você pode baixá-lo 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

Hacking Feliz!

Existem 3 métodos que eu uso para depurar ao desenvolver aplicativos React Native:

1. console.log(): mostra no console
2. console.warn(): mostra na parte inferior da caixa amarela da aplicação
3. alert(): mostra como um Prompt como acontece na web

É tão simples obter logs no React-Native

Use console.log e console.warn

console.log('character', parameter)

console.warn('character', parameter)

Este log você pode ver no console do navegador. Se você quiser verificar o log do dispositivo ou o log do APK de produção, é possível usar

adb logcat

adb -d logcat

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

Xcode Simulator Img

refer ： Depurando Reagir Aplicativos Nativos

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

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

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

Isso foi porque eu já havia empacotado meu projeto para testar em um dispositivo real com o comando:

react-native bundle --minify

Isto empacotado sem "dev-mode" em. Para permitir mensagens dev, 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 redirecionar jsCodeLocation em AppDelegate.m para localhost (eu fiz!).

react-native-xlog módulo que pode ajudá-lo, é do WeChat Xlog para react-native. Isso pode ser exibido no console e no arquivo de log do Xcode, 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');

Algo que acabou de sair há cerca de um mês é "Create React Native App", um clichê incrível que permite que você (com o mínimo de esforço) mostre como seu aplicativo se parece ao vivo em seu dispositivo móvel (QUALQUER com uma câmera) usando o aplicativo Expo . Ele não tem apenas atualizações ao vivo, mas ele permitirá que você veja os logs do console em seu terminal como quando está desenvolvendo para a web, ao invés de ter que usar o navegador como fizemos com o React Native antes.

Você teria, é claro, que fazer um novo projeto com esse clichê ... mas se você precisar migrar seus arquivos, isso não deve ser um problema. Dê uma chance.

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

Log de tempo de desenvolvimento

Para o log de tempo de desenvolvimento, você pode usar console.log () . Uma coisa importante, se você quiser desabilitar o log no modo de produção, então no arquivo Root Js do aplicativo, apenas atribua uma função em branco como esta - console.log = {} Ele desativa toda a publicação de log 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 registros quando usuários reais estão usando seu aplicativo em tempo real. Isso ajuda na compreensão de bugs, uso e casos indesejados. Existem muitas ferramentas pagas de terceiros disponíveis no mercado para isso. Um deles que eu usei é por Logentries

O bom é que Logentries tem React Native Module também. Assim, levará muito menos tempo para você ativar o registro em tempo de execução com seu aplicativo para dispositivos móveis.

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

Emulador ou dispositivo real

Para o primeiro uso do emulador: use

log-ios log-android ou react-native nativo de react-native

para obter a saída do log

no dispositivo real.shake seu dispositivo

então o menu virá de onde você selecionou a depuração remota e esta tela será aberta no seu navegador. assim você pode ver sua saída de log na aba do console .

Use reagir depurador nativo para logging e redux store https://github.com/jhen0409/react-native-debugg

Basta baixá-lo e executá-lo como software, depois ativar o modo de depuração no simulador.

Ele suporta outros recursos de depuração como elementos em ferramentas de desenvolvedor do Chrome, o que ajuda a ver o estilo fornecido a qualquer componente.

Último suporte completo para ferramentas do redux dev

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

Todos os desenvolvedores que enfrentam esta questão de depuração com a resposta nativa, mesmo eu enfrentei também e me refiro a isso e a solução é suficiente para mim no nível inicial, ela abrange algumas maneiras que nos ajudam a tentar usar o que já nos convém

1. Depurando com o 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

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

Você pode fazer isso em 2 métodos

1> usando avisar

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

2> Ao usar o alerta Isso não é bom cada vez que ele atinge o alerta, em seguida, cada vez pop será aberto por isso, se fazer loop significa não preferível usar este

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

Normalmente, há dois cenários em que precisamos depurar.

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 depurar js remotamente é a melhor opção.

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

   ambos os métodos mencionam aqui.

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

Usuários com Windows e Android Studio:

Você vai encontrá-lo sob o Logcat no Android Studio. Existem muitas mensagens de registro que aparecem aqui, então pode ser mais fácil criar um filtro para "ReactNativeJS", que mostrará apenas suas mensagens console.log que são criadas dentro do seu aplicativo nativo de resposta.

Se você está usando os emx e usando um emulador, pode visualizar seus console.logs diretamente no inspetor de sites do Safari.

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

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

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

Apenas console.log ('debug');

E executá-lo você pode ver o log no terminal/cd Prompt.