Introdução
Fala pessoal! Espero que estejam todos bem!
De forma bruta, a depuração consiste numa análise automatizada e minuciosa do seu projeto, objetivando encontrar erros que podem impedir que os códigos funcionem adequadamente. A partir dessa prática, é possível determinar o que está ocorrendo dentro do código-fonte e então implementar as soluções necessárias.
Comumente, esse procedimento é realizado diretamente do seu editor de texto ou ferramenta de desenvolvimento. Pode ou não ser uma novidade para você, mas o Chrome possui uma ferramenta específica para que você realize o debug do seu código.
Abaixo, utilizarei como exemplo um código desenvolvimento com NodeJS e Express durante a formação Fullstack Master, disponibilizada pela plataforma de ensino devPleno.
Acessando o seu código no degub do Chrome DevTools
Não há muitas divergências entre a depuração de código no VS Code, por exemplo, com o debug no Chrome DevTools, mas a primeira delas se encontra na forma de acesso à ferramente.
Primeiramente, você deve estar com o seu código em NodeJS em execução, mas com uma diferença. O comando é o seguinte:
node --inspect nome-do-arquivo.js
Com isso, caso a url para acessar o código no debug do Chrome não esteja disponível no terminal, você deve acessar a url chrome://inspect no browser. E então, na tela abaixo, acessar o link Open dedicated DevTools for Node.
Nesta tela, você deve acessar a aba sources, e então abrir o arquivo desejado, nesse exemplo, server.js.
E então, você tem à sua disposição um painel completo para depuração do seu código, com adicional dos recursos do Chrome DevTools aos quais está acostumado:
- Depuração de ponto de interrupção completa
- Mapas de origem para código transpilado
- LiveEdit: avaliação de hot-swap de JavaScript com V8
- Avaliação do console com recurso ES6
- Suporte a objetos e formatação de objetos personalizados
- Pilhas assíncronas para promessas nativas
Conclusão
Lembrando que existem outras formas de acessar o debug do Chrome DevTools, porém decidi compartilhar a que costumo utilizar. Está é uma alternativa ao debugger do seu editor de texto ou ferramenta de desenvolvimento que pode acrescentar em muito na perfomance do seu projeto, permitindo uma análise mais aprofundada do seu código.
A quem ficar interessado, indico o material presente neste link.
Sugestões, críticas ou dúvidas são sempre bem-vindas, e podem ser feitas aqui nos comentários.
Abraços ;)