Publicações

5 ferramentas para melhorar o debug no front-end

Lorrane De Alkimim
Lorrane De Alkimim Frontend Developer

Uma das principais skills de um desenvolvedor é a habilidade de debugar o código. Passamos grande parte do processo de desenvolvimento de um sistema apenas debugando algo que já foi desenvolvido e corrigindo bugs.

Isso pode não parecer tão glamouroso quanto a parte de desenvolver o código em si, mas a arte de debugar é algo tão essencial quanto criar o código do zero.

Se você quer ter um ganho de produtividade ao debugar suas aplicações e entregar softwares com mais qualidade, leia esse post até o fim para descobrir quais são as 5 ferramentas que vão te ajudar a melhorar o debug no front-end.

O processo de Debugging

O processo de debugging (depuração) pode se assemelhar a um processo de investigação, onde o desenvolvedor se torna um investigador e busca através de pistas descobrir a origem do bug.

De uma forma bem menos romântica, esse processo pode durar horas ou até mesmo dias, se tornando às vezes cansativo e frustrante caso não se tenha uma metodologia.

Para simplificar todo esse processo, vamos listar algumas etapas fundamentais em um debug.

  1. Identificar o problema: essa é a etapa principal para qualquer debug, pois é onde todo o processo se inicia. Essa é a fase onde o bug é identificado e reportado.
  2. Reproduzir o bug: depois de descobrir que o bug existe, o ideal é replicar o fluxo do sistema para descobrir onde está ocorrendo o problema.
  3. Identificar a causa do bug: ao reproduzir o problema, provavelmente você terá algumas suposições do que pode estar causando o bug — seja uma função ou uma variável específica. Nessa etapa, é hora de pôr em prática suas habilidades investigativas e testar essas suposições.
  4. Corrigir o problema: após encontrar a origem do problema, chega a tão esperada etapa de corrigir o bug. Se o processo foi feito seguindo todas as fases, essa possivelmente ficará mais simples.
  5. Testar a solução encontrada: se você já criou um caso de teste, a solução deve passar sem maiores problemas e com outros testes é possível verificar se a aplicação está funcionando corretamente e não houve efeitos colaterais. Se tudo está funcionando como esperado, hora de comemorar! 🎉

Esse processo pode parecer longo e complicado, mas existem algumas técnicas e ferramentas que podem facilitar o processo de investigação da origem do bug no seu código. Utilizando elas, você pode diminuir consideravelmente o tempo que leva debugando uma aplicação.

Top 5 Ferramentas para debug no front-end

O bom e velho Console do navegador

Um método comum para debugar uma aplicação web é inserir o comando console.log() no código para verificar os valores que estão sendo recebidos ou passados, mas esse não é o único uso dessa ferramenta.

O Console Javascript pode ser um grande aliado na hora de debugar seu sistema. Como em sistemas web muitas vezes as coisas acontecem de forma assíncrona, pode ficar complicado identificar o que está ocorrendo e causando o bug. É nessa hora que o Console pode facilitar esse processo.

De forma simples, o Console Javascript pode auxiliar o debugging por suas duas características principais:

  • Avisos e erros: Quando há algum problema em sua aplicação, normalmente é no console do navegador que você irá encontrar avisos ou erros sendo apontados sobre o que pode estar acontecendo. É sempre importante estar atento à esses avisos, pois muitas vezes são essas as pistas que precisamos para encontrar a causa do bug.
  • Saída de dados: Esse pode ser considerado o uso mais comum do Console. Quando é necessário validar os valores de uma variável, o momento em que ela é chamada ou os parâmetros de uma função quando o script é executado, essa pode ser uma ferramenta muito útil. O Console também pode ser usado para avaliar expressões Javascript e testar potenciais soluções para o bug.

O comando console.log é o mais conhecido, mas existem algumas outras funções do console que podem ser de grande ajuda em determinadas situações.

  • console.table( ): Exibe os dados em formato de tabela, facilitando a visualização.
  • console.trace( ): Exibe um rastreamento com uma lista de funções que foram chamadas até aquele momento no seu código.

💡 Confira mais funções do console API

Breakpoints debugger

Uma ferramenta que pode agilizar ainda mais o seu trabalho de debugging é o breakpoint. Com ele é possível pausar o código no meio da execução do sistema e analisar todos os valores passados até aquele momento.

Há duas formas de usar essa ferramenta, uma delas é adicionando os breakpoints na aba Source do DevTools ou na própria IDE que você utiliza; outra forma, é utilizando a keyword debugger; na linha de código onde você deseja parar a execução do script.

Declaração debugger em Javascript

Quando a execução do código chega a esse ponto de interrupção (breakpoint), é possível verificar no painel do navegador ou da IDE os valores das variáveis naquele momento e ainda executar outras funções do seu código para verificar como tudo está funcionando.

Breakpoint no VS Code

Essa pode ser uma ferramenta mais prática e mais completa do que o console.log, pois permite ter uma visão geral da execução da sua aplicação sem a necessidade de inserir o mesmo comando diversas vezes no código.

Network debugger

A interface de uma aplicação web geralmente depende da busca e envio de dados para algum lugar. Quando há um problema durante esse fluxo, a correção do bug normalmente vai envolver a inspeção das requisições e respostas da API.

Para facilitar essa investigação de problemas com a integração à API, os navegadores têm algumas ferramentas de desenvolvedor (DevTools) que podem ajudar muito. Nesse caso, podemos utilizar a ferramenta Network para verificar a atividade de rede que ocorre durante a execução do sistema.

Atividade de rede no painel Network

Com essa ferramenta, é possível ter uma visão mais ampla do que está ocorrendo com a integração da sua aplicação. Nela, ficam registrados todos os recursos baixados e carregados e todos os dados das solicitações e respostas em ordem cronológica.

A partir dessas informações, você pode verificar se os dados estão sendo enviados corretamente e se a resposta da requisição também está correta. Além de poder validar dados transferidos como cabeçalhos das requisições, código de resposta HTTP, conteúdo, tempo de carregamento, tamanho, número total de requisições e tamanho de todos os recursos transferidos.

Por meio desse painel de tráfego de rede, é possível identificar facilmente se o bug está sendo causado por uma requisição que falhou ou que está pendente e levando mais tempo do que esperado.

Extensões do VS Code

Além da funcionalidade nativa de debugging com breakpoints, o VS Code ainda oferece algumas extensões que podem ajudar no processo de debugging de um projeto diretamente do editor.

Live Share

Uma ótima ferramenta para editar e debugar código em conjunto com outros desenvolvedores em tempo real, é a extensão Live Share.

Com ela é possível compartilhar o projeto com o time, de forma rápida e prática, sem precisar clonar um repositório ou fazer grandes configurações. Com apenas um clique, é possível iniciar um pair programming ou code review, com chat e áudio integrados, além de todos os outros recursos do seu editor.

Essa extensão ainda permite que cada desenvolvedor possa inspecionar os arquivos de forma independente usando as funções de debugging do VS Code. Isso pode ser muito útil quando você precisa de ajuda para debugar uma aplicação.

Turbo Console Log

Como vimos acima, o método console.log() pode ser muito útil na hora de depurar uma aplicação, mas também pode ser uma ferramenta muito trabalhosa por ter que escrever e deletar o mesmo comando ao longo do código.

Para otimizar esse processo, você pode utilizar uma extensão do VS Code que automatiza essa tarefa de escrever as mensagens de log.

Com a extensão Turbo Console Log, você pode utilizar atalhos do teclado para gerar mensagens de log a partir de uma variável, e ainda comentar e/ou excluir as mensagens de log geradas.

{ Vue, React, Angular } Devtools

Alguns frameworks Javascript como Angular, Vue e React já possuem o seu próprio Devtools e essa pode ser uma das melhores formas de debugar sua aplicação, pois essas ferramentas oferecem uma gama de funcionalidades específicas do framework.

Vue Devtools

Você pode instalar as extensões deles no navegador e começar a debugar os seus web apps. Com isso, é possível navegar entre a árvore de componentes e inspecionar as props e os dados de cada elemento. Também é possível verificar o estado e os eventos em tempo de execução.

Considerações finais

Com a evolução das ferramentas de desenvolvimento, o fluxo de trabalho durante o processo de debugging tem sido otimizado, sendo possível ter mais qualidade de código e ganho de produtividade.

Neste post, vimos 5 ferramentas que podem ajudar o desenvolvedor front-end a fazer um debug mais rápido e eficiente. Mas é sempre bom ter em mente que o debugging ficará mais fácil com a prática e experiência.

Depois de algum tempo fazendo esse processo, lidando com muitos bugs e diferentes cenários, certamente os aprendizados te levarão a tomar melhores escolhas sobre técnicas e ferramentas a utilizar.

Para saber mais

How to debug Front-end: Console | Pragmatists

Debug JavaScript | Chrome Developers

Front End Debugging — Tips on Resolving Issues Quickly so You Can Move on to Better Things | ebay

debugger - JavaScript | MDN

Solução de problemas, melhoria de gestão e aumento de produtividade

Com tecnologias renomadas, aplicamos práticas ágeis e capacitamos sua equipe.

Fale com um consultor