Debugging com React Native Tools no VS Code

Hoje vou ensinar um meio de fazer debugging no React Native Expo + VS Code de forma fácil e sem precisar colocar um monte de console.log no código da sua aplicação.

Instalando as Ferramentas

Primeiro de tudo, vamos instalar a extensão "React Native Tools" no VS Code.

1. Abra o VS Code.
2. Vá até a aba de extensões (ícone de quadrado com um tracinho).
3. Pesquise por "React Native Tools".
4. Clique em "Install" e pronto, extensão instalada!

Configurando o Ambiente

Com a extensão instalada, agora vamos configurar o ambiente pra debugar. Vamos criar um arquivo launch.json dentro da pasta .vscode no seu projeto. Esse arquivo diz ao VS Code como iniciar e anexar o debugger ao seu app React Native.

1. Abra o seu projeto no VS Code.
2. Vá até a aba "Run and Debug" (ícone de um play com um inseto).
3. Clique em "create a launch.json file".
4. Escolha "Node". (Aqui não fará tanta diferença)

Isso vai gerar um arquivo launch.json básico. Clique no botão de Add configuração.

1.Selecione React Native

2.Attach to application

3.Application in direct mode (Hermes)

1. Hermes Engine

Ele irá pedir o localhost o qual você devera digital o valor que aparece em seu terminal.

ex: 192.168.20.15

E também irá pedir a porta que por padrão no CLI é: 8081 porém se estiver o expo pode ser 1900 (basta olhar no seu terminal :) )

Seu arquivo JSON deve se parecer com isso aqui:

{
  linkid=xxxx
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Hermes application",
      "request": "attach",
      "type": "reactnativedirect",
      "cwd": "${workspaceFolder}",
      "address": "192.168.20.15",
      "port":1900
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${file}"
    }
  ]
}

Com isso, já estamos prontos pra debugar tanto no Android quanto no iOS.

Utilizando o Debugger

Agora com tudo configurado, bora ver como usar o debugger de fato.
Na aba do debbuger:
Selecione o mesmo nome que esta no arquivo JSON e de play :)

Dicas Extras

• Hot Reloading: Certifique-se de que o Hot Reloading está ativado. Isso permite que você veja as mudanças no código instantaneamente sem precisar reiniciar o app.
• React DevTools: Instale o React DevTools pra inspecionar a árvore de componentes e o estado. Isso é super útil pra entender como o estado do seu app tá mudando.

Pronto! Agora você já sabe como configurar e utilizar o debugger do React Native Tools no VS Code. 🚀