3 ferramentas de debug para React Native

react 22 de Nov de 2017

Nesse post vou passar um pouco da minha experiência com Debugging no React Native, mais especificamente sobre algumas ferramentas que auxiliam muito a coletar informações sobre os componentes, estado, UI, requests em API, actions/reducers do Redux, etc.

Antes de mais nada, não posso deixar de falar do famoso console do navegador.

Do console viestes, ao console retornarás!

Apesar de parecer fraquinho e ser deixado de lado muitas vezes, não esqueça seus princípios, tudo começou pelo console do navegador e ele estará presente na sua vida de desenvolvedor web/react native por muito tempo. Para habilitar/abrir o console do navegador na aplicação em RN abra o menu de desenvolvedor (CMD+D no iOS, CMD/CTRL+M no Android ou chacoalhando o dispositivo físico) e clique na opção “Debug JS Remotely”:

Isso fará com que uma nova janela no seu navegador seja aberta, e com isso você já pode enviar informações ao console do navegador com o console.log ou qualquer outra função presente nessa API.

Apesar de conseguirmos visualizar os logs e as mensagens enviadas ao console, não teremos o mesmo sucesso para utilizar as outras abas das ferramentas de desenvolvedor no navegador, por exemplo, as requisições HTTP realizadas pelo app não serão exibidas na aba “Network” e os componentes presentes na camada de visualização do app não estarão presentes na aba “Elements”. Como resolver isso?

React Dev Tools

A primeira ferramenta que irei passar resolverá principalmente o problema de não conseguirmos enxergar nossa estrutura de componentes. Com ela será possível visualizar nossa árvore de elementos mesmo sem utilizar HTML. Para instalar, vamos começar instalando a lib em nosso projeto:

npm install --save-dev react-devtools

No seu arquivo index.js ou em qualquer lugar antes de exibir o primeiro componente da aplicação defina o seguinte trecho de código:

if (__DEV__) {
  require('react-devtools');
}

obs: A variável global __DEV__ no React Native indica quando você está em ambiente de desenvolvimento

Agora no seu arquivo package.json adicione o seguinte código ao objeto de scripts:

"react-devtool": "react-devtools"

Resultando em algo parecido com:

"scripts": {
  "start": "node node_modules/react-native/local-cli/cli.js start",
  "test": "jest",
  "react-devtool": "react-devtools"
},

Agora executando o comando npm run react-devtool uma tela será aberta a qual nos permitirá navegar pela árvore de elementos do React Native tal como ver suas propriedades, estado, estilos e contexto:

Provavelmente depois de realizar esse processo e começar a navegar pela estrutura do seu app, sua reação seja parecida com a desse cachorro:

Holy Crap

Ainda assim, se você utiliza Redux, essa extensão não irá te ajudar a monitorar o estado global, actions, reducers e middlewares executados.

Redux Dev Tools

Saindo da parte visual e entrando no fluxo das informações da nossa aplicação, o Redux Dev Tools nos permite saber sobre tudo o que está acontecendo no app caso esteja utilizando Redux. Para começar, instale os seguintes packages:

npm install remote-redux-devtools remotedev-server --save-dev

Agora pra configurá-lo em nossa app, você precisa responder a seguinte pergunta: Você utiliza algum middleware como Redux Thunk, Saga ou Logger?

Se não:

import { createStore } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';

const store = createStore(reducer, devToolsEnhancer());

Se sim:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'remote-redux-devtools';

const middleware = [thunk, saga, etc];
const compose = composeWithDevTools({ realtime: true });
const store = createStore(reducer, compose(
  applyMiddleware(...middleware),
));

Agora em seu arquivo package.json adicione o seguinte script:

"redux-devtool": "remotedev"

Resultando em algo como:

"scripts": {
  "start": "node node_modules/react-native/local-cli/cli.js start",
  "test": "jest",
  "react-devtool": "react-devtools",
  "redux-devtool": "remotedev"
},

E em seu terminal execute o seguinte comando:

npm run redux-devtool

Você receberá um resultado parecido com esse:

Agora você precisa instalar a extensão do Redux Dev Tools em seu navegador, pode ser o Google Chrome ou Firefox. Assim que instalada, clicando no ícone da extensão, selecione a opção “Open Remote DevTools”:

Pronto, agora você já pode ver tudo o que está acontecendo no seu estado, ações, reducers e todas informações disponíveis no Redux também ficam disponíveis pelo Redux Dev Tools:

Legal, agora que já conhecemos duas ferramentas incríveis para debugar nossa aplicação, vamos para a terceira e última que me ajuda muito no desenvolvimento dos meus apps.

Reactotron

Por último mas não menos importante, o Reactotron serve como uma timeline para sua aplicação e monitora tudo que acontece nela, sejam logs de console, requisições à API ou até ações no Redux ou Redux Saga. Para começar precisamos instalar a interface gráfica do Reactotron e para isso utilize esse guia para baixar de acordo com seu sistema.

Agora em seu projeto instale o package do Reactotron com o comando:

npm install --save-dev reactotron-react-native

E em algum local antes de iniciar o primeiro componente do App, configure-o com esse trecho de código:

import Reactotron from 'reactotron-react-native';

console.tron = Reactotron
.configure()
.useReactNative()
.connect()

Agora toda vez que precisar realizar um log ao invés de utilizar console.log utilize console.tron.log e assim a informação será passada para a timeline do Reactotron.

Agora abrindo a sua aplicação e o aplicativo do Reactotron podemos visualizar em tempo real o que acontece no app:

Caso queira monitorar o Redux e Redux Saga, o Reactotron oferece pacotes de integração com todas essas bibliotecas.

Uma coisa bem legal do Reactotron é na hora de estilizar o App, você consegue facilmente exportar uma imagem de layout do App e utilizá-la como overlay para se basear na hora de criar os componentes, vamos ver como isso funciona. Comece definindo a configuração de overlay onde você definiu o Reactotron:

import Reactotron, { overlay } from 'reactotron-react-native'

console.tron = Reactotron
 .configure()
 .useReactNative()
 .use(overlay())
 .connect()

No arquivo App.js ou em seu arquivo principal utilize o seguinte código:

class App extends Component {
  render() {
    return (
      <View />
    );
  }
}

const OverlayApp = console.tron.overlay(App);

export default OverlayApp;

E agora no Reactotron, na aba React Native, arraste a imagem de layout que você quer utilizar e ajuste as configurações de tamanho e espaçamento como necessário. Agora sua aplicação terá um overlay do Layout para facilitar a criação dos componentes com o tamanho e espaçamentos corretos:

E popopor hoje é é só pessoal

Legal né?! Agora com essas três ferramentas você já está pronto para enfrentar qualquer bug no React Native! Não esquece de deixar suas palmas, um comentário me contando o que achou do post e mais importante de tudo, entre em nossa comunidade para ficar por dentro de tudo que rola no universo da RocketSeat ?

Marcadores

Diego Fernandes

Programador full-stack, apaixonado pelas melhores tecnologias de desenvolvimento back-end, front-end e mobile, é co-fundador e CTO na Rocketseat.

Ótimo! Você se inscreveu com sucesso.
Ótimo! Agora, complete o checkout para ter o acesso completo.
Bem vindo de volta! Você fez login com sucesso.
Sucesso! Sua conta está completamente ativada, agora você tem acesso completo ao conteúdo.