003/100 Days of Code: Debugging Javascript
Tags: 100daysofcode, javascript, debugging, beginners
Published: 2022-02-19 13:39:10

---
title: 003/100 Days of Code: Debugging Javascript
published: true
description: A habilidade de dar voz ao seu código kkkkk
tags: 100daysofcode, javascript, debugging, beginner
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0e3zrq3otmlqyxig21y.jpg
series: 100 Days of Code
---

Na tentativa de adaptar o relatório do desafio à minha rotina vou passar a divulgar o post na parte da manhã com o resumo do aprendizado do dia anterior, por enquanto faz todo sentido, então vamos de teste! 

Ontem resolvi adiantar algumas funções e componentes de um projeto em que estou trabalhando e passei um pouco mais de 12 horas imerso nessas tarefas, por isso quando fui revisar a matéria para o desafio preferi optar por um assunto leve e que pudesse lidar sem que fosse preciso iniciar um projeto de teste.

Olhando a grade de aprendizado do FreeCodeCamp vi que dedicaram um módulo apenas para o debugging e por isso resolvi explorar um pouco esse processo, afinal é uma das habilidades que tenho como  obrigatórias para todo desenvolvedor.

Em Javascript o debug pode ser realizado por meio da famosa função `console.log()` que retorna os valores de seus parâmetros:
- no terminal de comandos, quando o código está sendo executado no back-end,
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lr08rcrgbo809zgl22tt.png)
- ou na área do console em 'Ferramentas do Desenvolvedor' nos navegadores, quando executado no front-end
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ni3pikadkbk1o2wp4f0.png)

O seu uso é simples e direto ao ponto, basta informar um ou mais parâmetros para a função e os resultados serão impressos:

```javascript
const str1 = 'Hello '
const str2 = 'World'

console.log(str1, str2)
// no console: Hello World
```

Ela pode ser adicionada a qualquer momento no código e te permite descobrir facilmente o atual estado de uma variável ou se uma função de fato está sendo executada.

Também é possível adicionarmos uma pequena personalização para o retorno do debug por meio dessas variações da função `console`:

```javascript
// no console do navegador retorna o valor como um aviso
console.warn('Isso é um aviso')

// no console do navegador retorna o valor como uma informação
console.info('Isso é uma informação')

// no console do navegador retorna o valor como um erro
console.error('Cuidado com isso aqui!')

// informe um objeto para ter um retorno organizado em tabela
const person = {
  firstName: 'Alexandre',
  lastName: 'Bekor' 
}

console.table(person)
```

Apesar de dificilmente impactar o processo de desenvolvimento da grande maioria dos desenvolvedores é importante ter como informação que a função `console.log()` e suas variações são executadas de forma síncrona.

Além desse modo clássico e talvez o mais utilizado, existe uma biblioteca que também auxilia o debug e torna o processo ainda mais profissional e informativo, cujo nome é bem auto explicativo: `debug`.

Por meio dessa biblioteca é possível gerar um log ainda mais detalhado e organizado do estado das variáveis, da execução das funções, e das requisições (para quem é apaixonado por organização e documentação é um verdadeiro show luzes no terminal), ainda estou me exercitando nela por isso prefiro não me arriscar transmitir informações mais profundas, mas se você quiser já começar a experimentar basta instalá-la e:
```javascript
// importá-la atribuindo a uma variável
const log = require('debug')

const str = 'Hello World'

// utilizá-la como função envolvendo o trecho que será depurado
log(str)
```

Executá-la no terminal primeiro definindo a variável `DEBUG` seguido da flag `*` e por fim executando o arquivo:

```bash
set DEBUG=* & node index.js
```

Você pode explorar um pouco mais da biblioteca diretamente pelo [repositório dela aqui](https://github.com/debug-js/debug).

E obviamente tendo em breve um material mais detalhado por aqui e por meio das minhas outras redes sociais.

## Outros Canais
Fique à vontade para entrar em contato comigo por essas outras mídias sociais também:
- [LinkedIn](https://www.linkedin.com/in/joaovitoralexandre/)
- [Instagram](https://www.instagram.com/alexandrebekor/)
- [Twitter](https://twitter.com/alexandrebekor)