Sobrecarregue sua experiência de depuração para o Node.js

Indrek Lasn Blocked Unblock Seguir Seguindo 22 de julho de 2018 Depurando com o Node

Você vê isso, o que você faz?

hipotético: você pode verificar cada linha de código e tentar encontrar um erro de digitação. Nenhum erro encontrado… em seguida, você pode começar a usar o console.logs para ver a saída do código, o que é um problema. Certamente existem métodos melhores por aí?

A depuração do código javascript do lado do servidor com os logs do console é arcaica.

Os logs do console simplesmente não são suficientes, pois exige que façamos linha por linha de maneira muito lenta, enquanto reiniciamos nosso servidor a cada vez. Os logs do console também sobrecarregam nossa base de código com código desnecessário e removê-los requer um pequeno esforço.

Figura A: Quanta energia é necessária para identificar o log do console entre os dados fictícios e outros processos?

uh-oh, console desordenado. Onde está meu log de console?

Muito assustador. Não precisa ser assim.

Uma maneira muito mais eficiente de fazer as coisas seria depurar com pontos de interrupção. Com pontos de interrupção, podemos passar por cima da pilha de chamadas e do loop de eventos para diagnosticar o problema.

Philip Roberts: O que diabos é o evento loop de qualquer maneira? | JSConf EU

Você entendeu. Hora de explorar outras opções. Quais são as opções? Estou feliz que você tenha perguntado!

By the way, há um tratamento muito saboroso no final do artigo – apenas dizendo.

O nó tem um inspetor embutido!

Sim está certo. O nó realmente tem um inspetor embutido . O inspetor usa o visualizador do protocolo do depurador v8 sob o capô.

Deixe-me mostrar-lhe – vamos começar um novo projeto de nó.

iniciando nosso projeto e instalando express e nodemonserver.js

Agora temos um servidor expresso básico. Mas em vez de usar o comando node server.js da maneira tradicional, estamos adicionando um sinalizador extra ao nosso comando node, o inspetor.

--inspect diz ao Node para expor o novo protocolo de depuração.

Assim que iniciarmos o nosso servidor com o inspetor, veja o que o console gera.

Doce, funcionou. Abra o Chrome em http: // localhost: 3000 com as ferramentas de desenvolvimento. Observe algo extra?

Observe o elemento Node ao lado do inspetor móvel

Woot, nó dentro do nosso navegador? Sim, de fato! Nós ainda consumimos nosso aplicativo como antes – localhost:3000

http://0.0.0.0:9229/ port é para o DevTools consumir.

Inspeção do código do lado do servidor dentro do nosso navegador

O que o Node Inspector faz?

O Node Inspector permite usar a interface do usuário do DevTools com o depurador nativo do Node . O DevTools agora pode se conectar diretamente ao processo do Node!

https://nodejs.org/docs/latest/api/debugger.html

Se você souber como fazer isso funcionar no Firefox ou no Safari, informe-nos nos comentários / discussões.

Usando o depurador

Usar o depurador de cromo é muito parecido com o uso do depurador para o código do lado do cliente. Você define pontos de interrupção, executa o código, percorre os pontos de interrupção e encontra o erro.

Usando pontos de interrupção para passar por cima do nosso código

Você pode imaginar o quão útil isso pode ser quando temos um erro dentro de um grande controlador? Temos acesso ao depurador, pilha de chamadas, escopos, variáveis locais, variáveis globais, etc. Temos tantas ferramentas afiadas para usar!

Levando a outro nível

Nós não terminamos ainda. 20 de julho de 2018 foi um dia muito especial para o nó de depuração. Por quê?

A equipe de laboratórios do Google Chrome abriu sua ferramenta de depuração avançada – ndb !

ndb é uma experiência aprimorada de depuração para o Node.js, ativada pelo Chrome DevTools

Ndb é uma ferramenta doce para depuração. Vamos dar uma chance.

Instalando o ndb

 npm install -g ndb 

É como qualquer outro pacote npm, muito simples de usar e instalar.

Uso

Para usar ndb, precisamos apenas prefixar nosso script de início com ndb.

acrescentando ndb ao nosso script de início

Isso é tudo! Vamos reiniciar o nosso servidor – note que estamos usando o nodemon – como qualquer outro projeto tradicional.

Woot! Temos uma nova instância do chrome com o único propósito de depuração. Quão legal é isso? Épico!

Temos até acesso ao objeto global do process nó – que é o objeto da window para o nó.

Hacker news discussion sobre o novo debugger – confira!

Ndb – Uma experiência aprimorada de depuração para o Node.js | Hacker News
Dito isso, tanto com o VSCode quanto com o WebStorm, eu tenho visto problemas meticulosos de vez em quando, como mapas de origem que não funcionam… news.ycombinator.com