Debugando código do NativeScript com Visual Studio Code

No outro post sobre NativeScript, fiz um aplicativo simples que buscava informações do servidor e exibia na tela em um listView e uma view simples.

bugassa vez vou mostrar como debugar um aplicativo com o Visual Studio Code. O VS Code possui um grande número de plugins, um deles é o NativeScript. Com esse plugin é possível fazer o debug dos aplicativo usando breakpoints.

Para instalar é só usar os comandos cmd(Mac)/ctrl(Windows) + shift + P > Install Extension > NativeScript, ou ir em View > Command Palette.

NativeScript - Debug Install Extension

Feito isso você está pronto para testar o debug no VS Code. Crie um aplicativo:

Abra o arquivo main-view-model.js e, na linha da função onTap que é chamada no click do botão, adicione um breakpoint. Agora, para executar o aplicativo e debugar, clique sobre o menu lateral de debug no VS Code; selecione a opção NativeScript clicando na engrenagem; selecione a opção Launch on iOS Emulator e clique no ícone verde de play. Isso vai fazer com que o emulator abra automaticamente.

NativeScript - Debug etapas

Para testar, clique no botão do aplicativo de teste e veja que o VS Code irá parar no breakpoint da função onTap.

NativeScript - Debug Breakpoint

Se você usar a versão com Angular e TypeScript, o breakpoint deve ser adiciona no arquivo .ts.