Neste tutorial, mostraremos como usar o React Native Debugger para-adivinhou-depurar aplicativos React Native.
Você deve estar se perguntando, por quê não usa a ferramenta de depuração padrão React Native? O que torna o React Native Debugger único? Continue lendo para aprender as respostas a essas perguntas e ver como funciona o React Native Debugger.
Instalando o React Native Debugger
Para iniciar a depuração, precisamos instalar React Native Debugger . Você pode instalar o React Native Debugger a partir do GitHub . Ou, se você estiver no macOS, pode executar este comando em seu terminal:
brew update && brew install–cask react-native-debugger
Depois de baixar e instalar o pacote, você pode começar a usar o React Depurador nativo.
Vamos lançar a ferramenta de depuração. Você pode ver que o React Native Debugger está em estado de espera e a ferramenta de depuração está escutando na porta 8081:
Conectando um aplicativo React Native ao React Native Debugger
Para conectar seu aplicativo ao React Depurador nativo, você precisa executar seu aplicativo e iniciar o modo de depuração.
Para iniciar o modo de depuração, agite seu dispositivo móvel ou pressione Command + Shift + Z ou Ctrl + M e escolha a opção de depuração.
Agora você verá que seu aplicativo está conectado à ferramenta React Native Debugger:
Estamos prontos para começar a usar o React Native Debugger.
Recursos do React Native Debugger
O que diferencia o React Native Debugger é que ele combina uma ampla gama de recursos em um único aplicativo autônomo. Alguns dos recursos mais interessantes incluem:
UI Inspector Depurar Redux Inspetor de rede Gerenciamento de AsyncStorage Breakpoints
Vamos ampliar cada recurso com mais detalhes.
UI Inspector
Se você é um desenvolvedor web, você deve estar familiarizado com o inspetor de elemento. No React Native Debugger, o UI Inspector funciona da mesma maneira: você pode ver todas as tags que usa em seu aplicativo e verificar o estilo. Ainda mais incrível, você pode testar sua IU e alterar o estilo no inspetor.
Isso torna o teste da sua IU muito mais rápido e acelera o processo de construção da IU de acordo.
Depurando Redux no React Native
Esteja você trabalhando em um aplicativo React ou React Native, eventualmente precisará de uma biblioteca de gerenciamento de estado. Redux é um dos líderes em gerenciamento de estado bibliotecas disponíveis.
Dito isso, usar Redux pode ser uma dor se você não pode depurar seu estado, especialmente no React Native. O React Native Debugger permite que você depure facilmente seu aplicativo baseado em Redux. Você pode até mesmo depurar o estado em tempo real.
Você pode usar a viagem no tempo Redux para depurar seu estado ao longo do tempo. Essa técnica é especialmente útil ao trabalhar em grandes projetos.
Para usar a ferramenta Redux dev, você precisa ativar o Redux em seu aplicativo. Para fazer isso, você precisa adicionar o seguinte código ao seu App.js. Ou você pode adicioná-lo à função principal do Redux.
const composeEnhancers=window.__ REDUX_DEVTOOLS_EXTENSION_COMPOSE__; const store=createStore (reducers,/* preloadedState, */composeEnhancers (middlewares));
Inspetor de rede
Hoje, é muito comum um aplicativo buscar dados da nuvem ou de um servidor. Para realizar essa tarefa, precisamos nos conectar à Internet ou a uma rede.
Você pode encontrar a necessidade de monitorar uma solicitação. Por exemplo, ao fazer uma chamada de API, você pode precisar verificar se está enviando os parâmetros de API corretos. Ou você pode querer verificar a resposta do servidor.
Para depurar uma solicitação, podemos usar o recurso de inspetor de rede no React Native Debugger. Clique na guia Rede , conforme mostrado abaixo:
Depois de abrir o inspetor de rede, se você fizer uma solicitação de rede, poderá ver todas as solicitações e seus respostas nesta guia.
Gerenciamento de AsyncStorage no React Native
Se você deseja imprimir ou registrar seu AsyncStorage no console, pode fazê-lo facilmente com o seguinte comando:
console.log (showAsyncStorageContentInDev ())Isso imprimirá ou registrará os dados AsyncStorage no console do React Native Debugger.
Usando pontos de interrupção no React Native
Os pontos de interrupção podem ser muito úteis quando você precisar interromper a execução do código em um determinado momento.
Você também pode verificar o fluxo de execução do código e ver o valor de uma variável. Simplificando, os pontos de interrupção ajudam você a entender o comportamento do seu aplicativo e detectar erros em segundos.
Conclusão
Neste tutorial, abordamos como usar o React Native Debugger para depurar aplicativos React Native. Também revisamos alguns dos recursos mais importantes do React Native Debugger, projetados para ajudar a acelerar e agilizar o processo de desenvolvimento.
