Debugando React com o VSCode

Published in

Code Prestige

3 min readOct 30, 2017

Você pode tentar negar o quanto quiser, mas eu sei que pelo menos alguma vez na vida você já usou o console.log() ou artifícios parecidos para debugar os seus componentes React. Não há vergonha nisso, todos nós já o fizemos:

“Será que este código está sendo executado? Vou colocar um console.log(“passei aqui”) pra ver o que está acontecendo.”

Felizmente não precisamos mais fazer isso. Neste artigo, vou te mostrar como configurar o VSCode para utilizar suas funcionalidades de debug, junto ao Google Chrome, para inspecionar código React.

Criando o Projeto

O primeiro passo é o mais óbvio de todos: você precisa ter um projeto em React. Eu particularmente gosto muito do create-react-app para dar o pontapé inicial nos meus projetos. Para quem não conhece o pacote, dê uma lida neste artigo.

Configurando o VSCode

Para fazer tudo isso funcionar, precisamos instalar o plugin Debugger for Chrome. Esta extensão permite que o VSCode consiga se comunicar com o Chrome através do seu protocolo de debug. Basicamente o que vamos fazer é trazer o debug do Chrome para dentro do VSCode.

Para instalar, basta entrar na barra de extensões do VSCode e procurar por: Debbuger for Chrome. Ele será o primeiro resultado:

Configurando o VSCode para se comunicar com o Chrome

Para conseguir realizar isto, precisamos criar uma configuração de debug para o projeto. Note que você precisará repetir este passo para cada um dos seus projetos React, ok?

Há três maneira de criar uma configuração de debug. Utilize a que você preferir:

Clique no ícone de debug
Vá na opção “Add Configuration”
Na opção de “Select Environment”, escolha a opção “Chrome”

Assim como o git cria um diretório oculto no projeto para armazenar seus dados relevantes, o VSCode fará o mesmo. Um diretório .vscode será criado na raiz do seu projeto (não se esqueça de colocá-lo no .gitignore!). Esse diretório contém um arquivo chamado launch.json. Esse arquivo contém a configuração de debug que utilizaremos.

Para fazer funcionar, apenas modifique a propriedade “url” para apontar para o seu servidor de desenvolvimento. Se estiver usando o create-react-app, será o http://localhost:3000 por padrão.

Você notará que há uma série de outras configurações no arquivo. A lista completa está aqui.

Debugando na prática

Agora que já está tudo configurado, chegou a hora de colocar em prática. Para iniciar o debug, existem três opções:

F5
Aperte o botão verde no painel de debug
Entre no menu: Debug > Start Debugger

Se tudo subir sem erros, você verá essa barrinha:

Agora, basta inserir um breakpoint em algum dos seus componentes. O breakpoint é marcado com uma bola vermelha no VSCode. Feito isso, suba sua aplicação (no caso do create-react-app, com o comando npm start). Ao acessar a página correspondente ao breakpoint do seu componente, o VSCode ficará congelado, exatamente na linha onde você demarcou.

Todas informações relevantes ficarão a disposição. A Call Stack, os Breakpoints, os scripts carregados e o valor das variáveis no atual momento da execução. Fenomenal, não é mesmo?

Agora é só debugar até encontrar o problema no seu código :)

Conclusão

Esta não é a única alternativa disponível para fazer debug de aplicações em React, mas para quem utiliza o VSCode e o Chrome diariamente, sem sombra de dúvidas é uma excelente opção.

Referências

Gostou? Recomende 👏 este artigo , comente, acompanhe nossa publicação e compartilhe!

Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.br — Facebook, Twitter, Youtube