Debug básico com JavaScript
- Lucas Akira
- Sem categoria
- maio 22, 2022
Quando estamos programando uma coisa muito comum e estressante é acontecer bugs nos nossos códigos, logo, boa parte do nosso tempo é gasto resolvendo esses bugs.
Por isso hoje vamos abordar o básico de como fazer debug dos nossos códigos. Neste artigo não iremos abordar ferramentas de debug, configurações e etc. Vamos focar em como analisar o problema e em como pensar numa solução para ele.
Caso base
Vamos começar com um cenário fictício, onde vamos fazer uma aplicação simples, onde vamos ter um formulário com dois campos e ao digitar números nesses campos, nós mostramos a soma deles na tela.
Segue o exemplo dos códigos HTML e JavaScript que iremos utilizar para basear o nosso cenário base:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Soma</title>
<!-- Não necessário para o exemplo -->
<link
rel="stylesheet"
href="<https://unpkg.com/@picocss/pico@latest/css/pico.min.css>"
/>
</head>
<body>
<main class="container">
<form>
<label for="x">
<span>X</span>
<input type="number" value="0" name="x" id="x" />
</label>
<label for="y">
<span>Y</span>
<input type="number" value="0" name="y" id="y" />
</label>
<output id="result"></output>
</form>
</main>
</body>
</html>
document.addEventListener("DOMContentLoaded", () => {
const x = document.querySelector("input#x");
const y = document.querySelector("input#y");
const result = document.querySelector("output#result");
const calculateResult = () => {
result.value = x.valueAsNumber + y.valueAsNumber;
};
[x, y].forEach((input) => {
input.addEventListener("keyup", calculateResult);
});
});
Fazendo o debug
Se executarmos esses códigos no navegador, podemos perceber que apesar de nós estarmos digitando os números nos campos, nenhum resultado é apresentado na tela, isso nos indica que tem um erro no nosso código.
Dessa forma precisamos utilizar a lógica para entender o que se passa.
A dica aqui é pensar nas coisas que são próximas ao problema, sabe-se que o HTML sozinho não ia mostrar mesmo os resultados na tela, portanto o que sobra é o JavaScript.
Sabendo que o problema provavelmente está no JavaScript vamos focar a nossa análise mas coisas relacionadas ao JS, ou seja:
- A linha que importa o JavaScript no HTML;
- O código JavaScript em si;
Claro que podemos derivar outras possibilidades em cima dessas possibilidades como por exemplo ter erros de sintaxe no JS, ou ser a lógica em si que estava errada, etc, mas por hora vamos ficar só com essas opções.
Agora conseguimos reduzir bem as nossas opções e com isso podemos focar melhor os nossos esforços, vamos começar pelo que me parece mais simples: A linha que importa o JavaScript no HTML.
E podemos constatar que ela não estava lá, então vamos inserir ela no código:
<head>
<!-- código anterior do head... -->
<script defer src="./scrip.js"></script>
</head>
E aparentemente nada mudou, então vamos a nossa segunda suposição: o código JavaScript.
E para ver os erros no código JS podemos utilizar o console do navegador, então ao abrir ele, nós vamos nos deparar com um erro semelhante a este:
Perceba que no erro diz Not Found (ou em português: não encontrado), o que nos sugere que ele não encontrou o nosso arquivo JavaScript. Pensando nisso, vamos olhar o que ele tentou buscar, que no caso vai aparecer em branco na imagem:
http://127.0.0.1:5500/scrip.js
Perceba que o nome do arquivo que ele puxou é scrip.js e não script.js, isso muito provavelmente aconteceu por um erro de digitação no código, então vamos voltar no HTML e ver o que tem lá:
<script defer src="./scrip.js"></script>
Realmente o caminho para o arquivo estava errado, então vamos corrigir isso e tentar rodar o código novamente no navegador. E voila, o código está funcionando como deveria:
Conclusão
Em geral, a mentalidade que você tem que ter para corrigir um bug vai se dividir nesses 3 passos:
- Procurar pistas sobre o problema, muitas vezes pensando sobre o que pode ter causado ele, ou investigando arquivos/códigos relacionados a ele;
- Análisar essas pistas e procurar entender o porquê elas aconteceram;
- Tentar corrigir o problema com base nisso;
Então da próxima vez que algo não funcionar no seu código, não entre em pânico, é normal, fique calmo e tente pensar sobre o que pode ter causado aquilo, e depois tente resolver com mais calma.
Claro, sempre tem aqueles problemas que não vamos conseguir resolver dessa maneira, e nesses casos sempre é válido recorrer a outras fontes como o famoso stackoverflow e verificar se alguém já teve algum problema parecido com o seu para poder ver como essa pessoa solucionou o problema dela.