Debug: O que é, para que serve

Debug: o que é, para que serve e + 5 dicas de debug para Javascript


Durante a criação de sistemas web é comum cometer erros, mesmo entre os programadores mais experientes. Faz parte do processo escrever, testar, errar, depurar e refazer, até chegar no resultado final desejado.

Um erro de digitação que prejudique a sintaxe do código, algum caracter faltante que faz a diferença para a execução de uma função e outras possíveis falhas lógicas são facilmente detectáveis por meio do debug.

Hoje, falaremos mais sobre este processo tão importante no desenvolvimento web.

Vamos lá?

O que é debug?

O debug ajuda os sistemas a rodarem sem falhas. Debugar é encontrar e corrigir erros de um software com a finalidade de tornar seu uso possível em todas as funções programadas para ele, ou seja, que ele funcione plenamente, ou rode (como também é dito dentro dos jargões de tecnologia) como se deve.

Para que serve o debug?

Ao escrever um código, o programador fará uso do debug para localizar problemas durante sua operação. Ele torna possível a navegação pelo site, aplicativo ou software sem que o usuário se depare com erros que possam comprometer o funcionamento de comandos específicos.

De onde surgiram os termos bug e debug?

O termo bug é usado como sinônimo de falha, bastante comum no meio da programação quando um sistema trava ou quando algo não sai como planejado. 

A história por trás do termo é curiosa, porém imprecisa. Uns dizem que a palavra surgiu por causa da analista de sistemas americana da década de 40, Grace Hopper, criadora da linguagem Flow-Matic, que serviu de base para a conhecida Cobol.

Hopper teria encontrado um inseto, (bug, em inglês) morto, dentro de seu computador, e isto impedia o funcionamento adequado dele.

Há outra hipótese de origem para o termo, mas em contextos semelhantes: o inventor da lâmpada, Thomas Edison, teria encontrado um inseto durante a leitura de seu fonógrafo. O bug ocasionou a falha mecânica de seu experimento e o termo passou a ser usado a partir disso, referindo-se a erros.

A palavra ganhou suas variantes e tornou-se verbo, debug, que pode ser traduzido com “depurar”. Em português, o verbo depurar significa tornar limpo, purificar, refinar, desembaraçar.

Como funciona a depuração?

Cada linguagem tem sua forma específica de depurar. No geral, a depuração acontece dentro do IDE  (Integrated Development Environment, em Inglês), em tradução livre, ambiente de desenvolvimento integrado, que é basicamente um programa para escrever programas. 

Durante o debug, é possível executar cada operação, uma de cada vez, saber qual o valor das variáveis e se estão funcionando ou não.

Aqui é importante salientar, também, que na hora de fazer o debug, é fundamental que o(a) programador(a) esteja descansado(a) e com a mente tranquila.

Executar um debug com  a cabeça cheia pode afetar consideravelmente a qualidade do processo. Para intercalar momentos de atividade com descanso, leia mais sobre a técnica Pomodoro.

Qual a importância do debug?

É indispensável ao programador o uso do recurso debug. Sem essa ajuda, seria mais demorada e difícil a tarefa de encontrar erros em meio a tantas linhas de códigos dentro de um programa.

O programador que aprende debug consegue otimizar melhor seu tempo e evitar que pequenos erros evoluam para problemas maiores que possam comprometer o trabalho.

5 dicas de debug para Javascript

O primeiro passo para depurar seu código é a escolha da IDE mais adequada à linguagem de programação escolhida (já que escrever código no bloco de notas pode ser o início para muitos programadores, mas não é o caminho mais fácil, nem o mais aconselhável!).

Uma IDE que dispõe de diversos recursos para a linguagem terá ferramentas de depuração avançadas bastante úteis na hora de escrever o código. 

1. Crie um ponto de pausa no seu código

Pontos de interrupção, como o próprio nome diz, são linhas indicadas pelo programador onde a execução do código será interrompida. 

Em diversas IDEs, é possível, neste ponto, seguir executando o restante do código, linha a linha, verificando os valores atribuídos às variáveis e se determinados trechos são executados até o fim da execução do método e o valor por ele retornado. 

Caso a IDE não tenha esse recurso, pode-se utilizar logs ou alertas para verificar valores de variáveis, se o fluxo do código executado era o esperado e qual será o resultado final. 

2. Avalie o que pode ter levado ao erro

Uma vez identificado o ponto onde o código começa a se comportar de maneira diferente da esperada, é hora de encontrar a origem do problema. 

Muitos erros podem ocorrer pelo fato de Javascript ser uma linguagem fracamente tipada. Por isso,  é comum que operações sejam executadas entre operandos de tipos incompatíveis, por exemplo. 

Esses erros, por ocorrerem em tempo de execução, são diagnosticados por meio do debug. 

Verifique, portanto, a fonte dos dados que são utilizados pelo seu programa e se eles estão chegando com o formato esperado e por completos. 

Analise também as bibliotecas e APIs usadas, que podem causar problemas no código-fonte de um aplicativo.

3. Avalie a sua documentação

A maioria das linguagens de programação de mercado tem documentação disponível para consulta. Tire todas as dúvidas relacionadas ao uso da linguagem pela documentação oficial ou manuais de referência. 

Muitas vezes, o uso de funções e métodos deve seguir uma assinatura específica para atingir certo resultado. Tenha sempre uma boa referência da linguagem à mão para auxílio.

A consulta a blogs e fóruns pode ajudar também! Afinal, se você identificou um problema específico, é provável que alguém também já tenha passado por ele e documentado uma solução. 

4. Elimine os cenários em que o bug não ocorre

Saber o que não está causando bug vai ajudar a identificar mais rápido o que está. 

Quando surgir um erro durante o debug, reproduza-o para entender o caminho que vai te lavar à raiz do problema, o ponto exato onde é necessária a atenção do programador.

5. Identifique se o resultado obtido com a operação corresponde ao correto

É recomendado neste momento consultar as regras de negócio do sistema em questão, em especial para sistemas complexos. 

A compreensão de como determinada funcionalidade do sistema deveria se comportar facilita, e muito, verificar se a execução do sistema está acontecendo da forma correta. 

5 tipos de ferramentas de depuração

Conhecer a ferramenta de depuração de cada um dos principais navegadores do mercado ajuda a encontrar essas incompatibilidades e resolvê-las de modo mais rápido. Veja as principais:

  • Chrome Dev Tools

Essa ferramenta do Chrome permite visualizar, incluir e excluir elementos do DOM de uma página, o que ajuda bastante caso seu código gere elementos HTML dinamicamente. 

Os logs adicionados em Javascript são mostrados na aba Console, assim como erros e warns, o que é bastante útil durante a depuração do código. 

É possível também ver as requisições que estão sendo feitas pela página, seu retorno, o tempo de resposta, entre muitas outras informações que auxiliam na tarefa de diagnóstico e correção de erros.

  • Web Inspector

O Web Inspector tem a mesma proposta do Chrome Dev Tools, mas com uma interface mais amigável, especialmente para edição de elementos do DOM de páginas WEB. 

Suas ferramentas de diagnóstico avançado são também bastante atrativas e dão agilidade ao processo.  

  • Firefox Developer Tools

Muito semelhante ao Chrome Dev Tools, essa ferramenta do Firefox permite fazer o debug de código executado por esse navegador, além de ter a funcionalidade Javascript Debugger, que ajuda a parar, verificar e alterar o Javascript durante a execução.

É importante lembrar que um código escrito e testado em um navegador pode não ser compatível com outros navegadores. 

Há uma grande quantidade de incompatibilidades, especialmente quando usamos bibliotecas externas, que precisam ser consideradas. 

  • React Developer Tools

Sendo uma biblioteca do Javascript, o React tem muitos recursos que necessitam de uma ferramenta específica de diagnóstico. 

O React Dev Tools é uma ótima opção para adicionar ao Chrome Dev Tools essas ferramentas que facilitam o debug de código escrito em React. 

A função de inspecionar a árvore de elementos React é o destaque dessa útil ferramenta que está disponível para os principais navegadores.

  • Node Inspector

O Node Inspector funciona semelhantemente ao Chrome Dev Tools. Ele permite navegar pelos arquivos fonte da aplicação, inserir breakpoints, inspecionar escopo de variáveis e seus valores, entre outras funcionalidades. 

Conclusão

O debug, apesar de trabalhoso, é fundamental para identificar e eliminar inconsistências dentro do código-fonte de um software logo no começo de sua criação, evitando gasto de tempo e de recursos.

Depois de compreendermos como funciona o debug, fica evidente os benefícios de utilizar o recurso para criar sistemas melhores, com vida útil mais longa e maior usabilidade para os futuros usuários.

+1

Escreva o primeiro comentário

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *