Extensões

[wp_ad_camp_3]

Vamos preparar para que você possa depurar tanto a aplicação no ionic serve (testando em seu browser), como no ionic cordova run android (com a aplicação compilada no Android ou iOS).

Para isso vamos precisar de duas extensões do VSCode para nos ajudar, são elas:

1. Debugger for Chrome (distribuído pela própria Microsoft)
   
2. Cordova Tools
   

Configurando o VSCode

[wp_ad_camp_2]

Após instalar as extensões você pode ir na sessão de debug do vscode (4º ícone da barra lateral esquerda). Lá você clica na engrenagem que fica após o combobox e escolha a opção Cordova.

Logo após isso vai ser criado o arquivo launch.json com diversas opções de debug disponíveis. Porém vamos apagar o conteúdo atual do arquivo e colocar o conteúdo abaixo no lugar.

{
    // 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": [
        {
            "name": "Depurar no Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/www"
        },
        {
            "name": "Depurar no Android",
            "type": "cordova",
            "request": "attach",
            "platform": "android",
            "target": "device",
            "port": 9222,
            "sourceMaps": true,
            "cwd": "${workspaceRoot}"
        },
        {
            "name": "Depurar no iOS",
            "type": "cordova",
            "request": "attach",
            "platform": "ios",
            "target": "device",
            "port": 9220,
            "sourceMaps": true,
            "cwd": "${workspaceRoot}"
        }
    ]
}

Ao colocar esse código e salvar feche e abra o seu Visual Studio Code e na sessão de debug você já terá disponível o “Depurar no Chrome”, “Depurar no Android” e “Depurar no iOS”.

Vamos testar?

[wp_ad_camp_1]

Agora é a hora que todos estavam esperando não é mesmo? Vamos fazer 2 testes, o primeiro é depurando usando o próprio google chrome, e o segundo é fazendo a depuração usando o próprio dispositivo.

• Obs: Na imagem não contém o depurar no iOS pois como não tenho um Mac eu removi a opção, mas na empresa eu testei e vai rolar na maçã 😉

Depurando no Browser

Para fazer o debug tanto na aplicação compilada quando no browser primeiro é necessário rodar o comando do ionic responsável pela plataforma desejada. No browser vamos no terminal e executar o comando “ionic serve –nobrowser“. Assim que finalizar o processo de compilação, vá até a opção de debug selecione a opção “Depurar no Chrome“. Assim que o navegador for aberto e o rodapé do seu VSCode estiver laranja, você já está depurando sua aplicação.

Vai fundo, coloque um breakpoint em uma de suas rotinas e seja feliz!

Depurando no Dispositivo

O processo de depuração no dispositivo é bem semelhante ao do browser. Você precisa executar a usando o comando desejado no meu caso “ionic cordova run android -l“. No meu caso vou colocar o -l para fazer o uso do live reload dentro do dispositivo.

Assim que compilar e o aplicativo estiver aberto em seu dispositivo, basta você selecionar a opção “Depurar no Android” ou “Depurar no iOS” e aguardar a barra ficar laranja. Após isso é a mesmo processo do browser! Coloque seus breakpoints e seja mais produtivo no seu trabalho.

Obrigado e espero que tenha gostado! Caso tenha alguma dúvida ou sugestão, pode deixar um comentário informando seu e-mail (não envio spams rs). Valeu!

The post Depurar uma aplicação ionic no VSCode appeared first on Hiago Silva Souza.

Configurando seu VSCode

[wp_ad_camp_3]

1. Primeiro abra seu projeto com o Visual Studio Code após isso vá até o menu de Debug (ctrl + shift + D).
2. Segundo clique sobre a engrenagem ao lado do combobox.
3. Terceiro clique sobre a opção NodeJS

Após concluir o terceiro passo vai ser aberto um arquivo chamado launch.json (caso pergunte alguma outra informação selecione algum modelo do NodeJS) e substitua o conteúdo que tem nele pelo conteúdo abaixo:

{
    // 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": "launch",
            "name": "Depurar Projeto",
            "protocol": "inspector",
            "args": ["${workspaceRoot}\\src\\main.ts"],
            "cwd": "${workspaceRoot}",
            "runtimeArgs": [
                "-r",
                "ts-node/register"
            ],
            "internalConsoleOptions": "openOnSessionStart"
        }
    ]
}

Agora é só salvar o conteúdo e seu VSCode já vai estar configurado para depurar aplicações NodeJS + TypeScript usando o Framework NestJS.

Depurando a Aplicação

[wp_ad_camp_2]

Agora você já pode colocar seus breakpoints em seu código (clicando no espaço antes do número da linha) pressionar a tecla F5 em seu teclado e ser feliz!

Observação: Caso não funcione a depuração, tente reiniciar o VSCode para ele ler as configuração de Debug feitas por você, comigo não foi necessário, mas pode ser que aconteça.

Conclusão

[wp_ad_camp_1]

Com pequenos passos configuramos o ambiente para facilitar nossa vida no trabalho. Escrevi esse post, pois eu fiquei um bom tempo depurando as aplicações usando o chrome://inspect e o fato de ficar alternando entre as janelas, tanto para fazer alteração de código quanto para analisar uma informação me incomodava bastante.

Obrigado e até mais 😉

The post Depurar sua aplicação NestJS com o VSCode appeared first on Hiago Silva Souza.