Dê o próximo passo e inicie sua carreira
Dê o próximo passo e inicie sua carreira agora mesmo
5 minutos de leitura
Autor(a)
Vivo no 220v, sempre atrás de um filme/rolê novo e codando desafios aleatórios em JavaScript. Adoro fazer sites e falar/dar aulas sobre isso no @nubank, meu canal no YouTube DevSoutinho e na @alura
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Eu trabalho bastante com Node em diversos projetos no meu dia a dia, e me lembro que no começo eu sofria bastante por não saber como debugar meu código. Afinal, existem inúmeras formas de se fazer isso e eu gostaria de compartilhar com vocês a que eu mais gosto - usando o VSCode
Fica tranquilo que para esse post você não precisa ser um ninja master em Node.JS. Com uma base de e interesse em Node já vai conseguir pegar a ideia :).
Next: um guia de como depurar aplicações web
Ler mais
Conhecendo playgrounds de bibliotecas front-end
Ler mais
Instalando o Browser-sync
Ler mais
Para não perder muito tempo, eu já tenho um projeto previamente criado com Express que possui o seguinte código:
const express = require('express')
const app = express()
app.get('/', (req,res) => {
const dadoExterno = req.query.dadoExterno
const valorDoResponse = `Você me enviou: ${dadoExterno}`
res.send(valorDoResponse)
})
const port = 3000
app.listen(port, () => {
console.log(`
Servidor subiu com sucessinhos!
htttp://localhost:${port}
`)
})
No package.json, eu deixei criado nos scripts um comando dev para rodar o servidor em modo de desenvolvimento
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon ./server.js"
},
Caso você não conheça o nodemon, ele é uma ferramenta que encerra e inicia um processo node, facilitando o reload para testarmos alterações feitas no código do nosso servidor.
Repare que ao acessarmos nosso projeto no navegador, a resposta nos retorna um undefined. Isso acontece pelo fato de que não informamos a variável na query string dadoExterno.
Em um código pequeno e isolado é mais fácil encontrar erros e códigos que retornam algo inesperado, mas em um projeto com várias camadas entre os arquivos é difícil encontrar algo facilmente.
Em casos assim a primeira coisa que eu faria seria fazer um console.log() em dadoExterno para entender o que está acontecendo:
Agora voltando para o caso de códigos mais complexos, eu prefiro ter alguma ferramenta que me ajude a debugar, algo próximo do que eu tive quando trabalhei com C# ou Java no IntelliJ e no Visual Studio.
No VsCode, se alguma vez você chegou a clicar errado em uma linha, provavelmente viu essa bolinha vermelha aparecendo
Isso é um breakpoint, seria o equivalente a escrevermos a palavra debugger no meio do código. O legal é que é possível integrar esse breakpoint com o reload do nosso servidor.
O Node/Nodemon, possui uma flag que podemos passar para ativar um modo de inspeção (inspect) em nossos projetos. Em linha gerais é aberto um socket que diversas ferramentas podem se inscrever e nos permitir o debug
É possível debugar projetos até mesmo através do console do Chrome após passar essa flag:
Visualizando a URL chrome://inspect/#devices
Como o foco desse post é o VsCode, podemos seguir. Para continuarmos nossa integração, dentro do editor na barra de opções, onde vemos nossos arquivos abertos, clique na opção Debug e depois em Add Configuration...
Ao clicarmos neste botão, irá abrir um arquivo com configurações que podemos adicionar em nosso projeto do VsCode
Dentro do array de configurações, iremos adicionar um objeto que irá se atrelar ao nosso processo do node ou do nodemon e assim mapear os breakpoints do nosso código:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach by Process ID",
"processId": "${command:PickProcess}",
"protocol": "inspector",
"restart": true
},
]
}
Com isso, ao clicarmos no botão de play na aba de debug, podemos ver o VsCode nos perguntando qual processo queremos monitorar:
Aqui vamos escolher o nodemon
É importante ressaltar que você precisa ter rodado o comando
nodemon --inspect ./arquivo.js. Sem a flag do inspect nada irá acontecer aqui.
E após isso, podemos ver que o VsCode ficou com a barra de baixo laranja e apareceu uma mensagem "Debugger attached" no console
É importante lembrar que devemos ter rodado anteriormente o comando
npm run devcom o nodemon --inspect
Agora é possível adicionarmos breakpoints em nosso projeto e acompanharmos o debug:
Espero que tenha gostado do post, em breve trarei mais dicas, se curtiu e quiser saber em primeira mão quando vierem novos conteúdos, me segue no meu twitter e pra acompanhar meus outros posts ta tudo centralizado em meu site pessoal https://mariosouto.com até mais \o
Se gostou do artigo, que tal dar uma olhada na nossa formação de engenheiro front-end na Alura e aprender mais um pouco sobre essa gigantesca área?
Avalie este artigo