Melhores ferramentas e práticas para depurar React Native Apps!

A depuração é uma das atividades cruciais durante o desenvolvimento de software. Refere-se ao processo de identificar um erro em um aplicativo de software que causa problemas de desempenho, analisar o problema e, finalmente, resolvê-lo. A depuração permite validar seu código e corrigir problemas antes de enviar um aplicativo de software para o estágio de produção. No entanto, é provável que problemas de depuração surjam durante várias fases – desenvolvimento, teste e até produção/pós-implantação. E a implementação das ferramentas e metodologias de depuração corretas acelerará o desenvolvimento e aumentará a eficiência do produto final.

Vindo para depuração React Native; o framework é composto por diferentes ambientes, sendo os mais destacados o Android e o iOS. Como resultado, torna-se um desafio depurar aplicativos devido às várias plataformas envolvidas. Além disso, o React Native oferece uma enorme variedade de ferramentas para depuração, o que parece confuso para muitos, principalmente para iniciantes. Este post orienta você através de algumas práticas eficazes e ferramentas úteis de depuração React Native e React que ajudarão você a identificar problemas e corrigi-los como um especialista.

Metodologias e melhores práticas de depuração nativa do React

Identificando e endereçando erros, avisos e logs do console

Erros e avisos do console são visíveis na forma de notificações na tela com um emblema vermelho ou amarelo.

Erros

Erros serão exibidos dentro de um RedBox com o comando console.error(). Este RedBox contém uma descrição do erro e também uma sugestão de como resolver o erro. Dê uma olhada neste exemplo. Se você escrever uma propriedade de estilo que o framework React Native não suporta, ou se você escrever uma propriedade destinada a ser usada para um elemento específico (como um backroundImage precisa ser definido para o elemento View), o RedBox mostra um erro juntamente com a lista de propriedades de estilo suportadas que podem ser aplicadas à Vista.

Avisos

Os avisos serão exibidos dentro de um YellowBox com o comando console.warn() Esses avisos incluem informações sobre problemas relacionados ao desempenho e código obsoleto. A maioria desses avisos indica alguma prática ruim em seu código. Exemplos de avisos incluem uma notificação sobre a presença de um eventListener que não está sendo removido, a presença de recursos e dependências preteridos etc.

Histórico

Para emitir logs, use o comando react-native log-android ou use o console do Chrome com o comando console.log(string str)

Os desenvolvedores do React Native podem ocultar as notificações sobre erros e avisos com o comando LogBox.ignoreAllLogs() sempre que necessário, como durante demonstrações de produtos. Você também pode ocultar as notificações por log com o comando LogBox.ignoreLogs(). Esse método funciona em cenários em que um aviso barulhento não pode ser resolvido como os de uma dependência de terceiros. Mas, sempre que você ignorar os logs, certifique-se de criar uma tarefa para corrigir esses logs ignorados posteriormente.

Depurando usando o modo de depuração interno do React Native

Confira como utilizar o modo de depuração integrado oferecido pelo ecossistema React Native usando navegadores como Safari ou Chrome.

Depurando com o Chrome

Instale estes react-devtools para suportar React Native: Yarn e NPM. Em seguida, use o modo de desenvolvimento para abrir o menu do desenvolvedor no aplicativo; aqui você inicia o processo de depuração ativando a opção debug.

No menu do desenvolvedor, selecione a opção Depurar JS remotamente. Esta ação abre um canal para um depurador JS. Uma nova guia é aberta; aqui, no menu do Chrome, escolha Ferramentas – Ferramentas do desenvolvedor; para abrir o devtools.

As outras opções mais importantes a serem utilizadas no menu do desenvolvedor no aplicativo para depurar aplicativos são:

Habilite o Live Reload: para recarregar automaticamente o aplicativo, Habilite o Hot Reloading: para identificar as modificações que resultam em um arquivo alterado e o Start Systrace inicia a ferramenta de criação de perfil baseada em marcadores do Android. A opção Toggle Inspector ajuda a alternar uma interface de inspetor. Dessa forma, os desenvolvedores podem inspecionar os elementos da interface do usuário presentes na tela e examinar suas propriedades. Em seguida, uma interface é apresentada; essa interface contém outras guias, como rede para exibir as chamadas HTTP, bem como uma guia relacionada ao desempenho. A opção Show Perf Monitor acompanha o desempenho do seu aplicativo.

Depuração com Safari

A versão iOS do seu aplicativo pode ser depurada usando o Safari e, aqui, você não precisa habilitar “Debug JS Remotely”. Basta abrir as Preferências e selecionar as seguintes opções:

• Preferências
• Avançado
• Mostrar menu Desenvolver na barra de menus

Em seguida, escolha o JSContext do seu aplicativo:

Desenvolver – Simulador – JSContext

Agora, o Web Inspector do Safari será aberto e você poderá visualizar um Debugger e um Console. E, cada vez que você recarregar o aplicativo, manualmente ou usando a atualização rápida (recarregamento ao vivo), um novo JSContext será criado. Lembre-se de selecionar a opção Automatically Show Web Inspectors for JSContexts; caso contrário, o JSContext mais recente será selecionado manualmente.

Ferramentas de depuração nativas React/React proeminentes

React DevTools

Este conjunto de ferramentas React é empregado para depurar a hierarquia de componentes do React e funciona bem para operações front-end. Usando este conjunto de ferramentas, você pode ver o que está lá dentro de sua árvore de componentes – selecione o estado de opções do componente e edite as props atuais.

React Developer Tools é a extensão para os navegadores Firefox e Chrome. No entanto, para depurar aplicativos construídos no React Native, você precisa usar uma versão autônoma do React DevTools e executar este comando em seu terminal – npm install –g react-devtools. Em seguida, inicie o aplicativo executando o comando react-devtools; selecione a opção Mostrar Inspetor no menu do desenvolvedor no aplicativo para examinar os elementos da interface do usuário do aplicativo.

Se o Redux for usado, você precisará usar o React DevTools junto com o ReduxDev Tools para entender completamente o estado do seu componente. Para isso, o Redux DevTools precisa ser instalado separadamente e aqui, a ferramenta React Native Debugger também se mostra bastante útil.

Reagir depurador nativo

O React Native Debugger é imensamente benéfico se o Redux for usado durante o desenvolvimento do aplicativo React Native. Esta é uma ferramenta autônoma que funciona no Linux, Windows e macOS. Essa ferramenta é usada para registrar ou excluir conteúdo de armazenamento assíncrono, detectar e diagnosticar problemas de desempenho e examinar solicitações de rede.

A melhor parte é que ele integra React DevTools e Redux DevTools em um único aplicativo e, portanto, não há necessidade de usar dois aplicativos separados para depurar aplicativos para os ambientes React e Redux. A ferramenta oferece interfaces onde você pode examinar e depurar elementos React e também visualizar os logs do Redux e as ações relacionadas.

O depurador React Native supera o Chrome DevTools ao empregar o inspetor de alternância para inspecionar elementos React Native. Além disso, o depurador React Native fornece a funcionalidade de edição de estilos; esse recurso não está presente no Chrome DevTools.

nadadeira

Flipper é uma ferramenta multiplataforma usada para depurar aplicativos JavaScript, bem como o dispositivo e os logs JS. Ele lança simuladores para gerenciar dispositivos, pode se conectar a vários dispositivos simultaneamente para depurar aplicativos em várias plataformas e envolve um processo de depuração em uma única etapa, incluindo pontos de observação e pontos de interrupção.

O Flipper edita os componentes em tempo real, depois reflete essas edições em tempo real dentro do aplicativo e se integra ao Layout Inspector do aplicativo. Sua capacidade de gerenciamento de lançamento integrado permite que os desenvolvedores definam configurações e as empreguem para testes de unidade, sem precisar replicar configurações em vários locais. Além disso, vem com uma arquitetura baseada em plug-ins e uma infinidade de recursos úteis; mais recursos são esperados nos próximos anos.

Com o Flipper, você pode visualizar, inspecionar e controlar seus aplicativos usando uma interface de desktop simples. O Flipper pode ser usado como está ou estendido empregando a API do plugin.

Confira este blog para obter mais informações sobre outras ferramentas importantes para depurar aplicativos React Native!

Resultado final

As ferramentas e metodologias mencionadas permitem que você depure aplicativos com mais eficiência e perfeição, como um profissional. Essas ferramentas e práticas recomendadas fazem maravilhas para acelerar o desenvolvimento, aumentar a produtividade do desenvolvedor e melhorar o desempenho do produto final.

Você gostaria de se juntar a desenvolvedores de aplicativos qualificados que compreendem o funcionamento de seus aplicativos React Native, identificam problemas de uma só vez e corrigem bugs instantaneamente? Se sim, então vale a pena experimentar a Biz4Solutions, uma empresa de desenvolvimento de software de outsourcing distinta! Somos especializados em oferecer serviços competentes de desenvolvimento React Native e cuidar de todo o ciclo de vida do produto, desde a concepção do aplicativo até a manutenção pós-implantação.

Para saber mais sobre nossas outras tecnologias principais, consulte os links abaixo:

Desenvolvimento de aplicativos Swift
Desenvolvimento de aplicativos .Net
Desenvolvimento de aplicativos Java