Front End

5 set, 2017

Depurando código Node.js no Visual Studio

Publicidade

Para os desenvolvedores de formação .NET que nem eu, quando entram em uma nova stack que precisam depurar algum código, logo lembram do break point que nos ajuda muito no Visual Studio.

Veremos nesse artigo como depurar codigos JavaScript no Visual Studio code e no Visual Studio 2017 versão community.

Nosso primeiro passo será com o Visual Studio 2017. Para isso, vamos baixar o projeto que criamos para esse artigo no link. Ele é um projeto simples em node com o module express. Agora, abra o seu Visual Studio. Para esse artigo, iremos utilizar a versão 2017 Community. Com o VS aberto, vá em: file new Project > Other Languages > JavaScript e selecione Node.js; após isso, selecione o template From Existing Node.js code e informe o local no qual você salvou o projeto. Podemos ver esse passo na imagem a baixo:

Template JS no Visual Studio 2017

Com o projeto aberto no Visual Studio, adicione um break point na linha 5, conforme está na imagem a baixo e execute o seu projeto.

Agora que o projeto está rodando, abra no seu navegador o endereço abaixo para que possamos depurar o nosso código: http://localhost:3030/

Notem que o Visual Studio irá nos informar que o nosso código parou no break point.

Agora, passe o mouse no parâmetro req (request) e notem que temos todos os valores da nossa request para depuração.

Agora para que possamos depurar o nosso código e verificar os parâmetros que estamos recebendo, abra a URL a baixo no seu navegador e adicione um break point na linha 12 do seu código.

http://localhost:3030/api/users?id=4&name=kratos

Agora com o immediate window aberto no Visual Studio, vamos verificar se estamos recebendo o parâmetro name corretamente:

Notem que estamos com o nosso código parado no break point e com o immedite conseguimos depurar o nosso código Node da mesma forma que fazemos com o C# ou qualquer outra linhagem back end que utilizamos com o Visual Studio.

Agora para que possamos depurar com o Visual Studio Code, abra o seu projeto nele, adicione um break point no linha 8 novamente. Feito isso, clique no ícone de debug do VS que fica na lateral esquerda da IDE e clique no botão de play conforme imagem a baixo:

Notem que ira aparecer a mensagem a baixo na aba de Debug Console que o projeto esta sendo executado na porta 3030:

Abra no seu navegador o endereço que esta aparecendo no server e note que ele ira parar no break point da mesma forma que no Visual Studio 2017.

Com isso, nós conseguimos desenvolver de uma forma mais produtiva e em caso de erros depurarmos o nosso código de uma maneira mais rápida.