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 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:

1. Clique no ícone de debug
2. Vá na opção Add Configuration
3. 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. E 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:

1. F5
2. Aperte o botão verde no painel de debug
3. 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

1. https://medium.com/code-prestige/debugando-react-com-o-vscode-efffc6f08233
2. https://hackernoon.com/debugging-react-like-a-champ-with-vscode-662817600373
3. https://github.com/facebookincubator/create-react-app
4. https://developer.chrome.com/devtools/docs/debugger-protocol
5. https://github.com/Microsoft/vscode-chrome-debug
6. https://code.visualstudio.com/docs/editor/debugging
7. https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code