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.
- Abra o VS Code.
- Vá até a aba de extensões (ícone de quadrado com um tracinho).
- Pesquise por "React Native Tools".
- 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.
- Abra o seu projeto no VS Code.
- Vá até a aba "Run and Debug" (ícone de um play com um inseto).
- Clique em "create a launch.json file".
- 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)
- 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. 🚀
Top comments (0)