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.

Você provavelmente, já precisou inspecionar sua página remotamente para fazer a análise de um problema de seu sistema web em um dispositivo móvel e já deve ter acontecido do problema não acontecer no seu navegador e persistir no dispositivo. Já pensou você inspecionando sua página remotamente? É isso que vou mostra para você no post de hoje

[wp_ad_camp_3]

Há algum tempo atrás uns amigos meus precisaram de resolver um caso assim, então eles vieram me perguntar se havia alguma ferramenta para fazer esse tipo de análise. Na época, eu indiquei para eles o uso do chrome://inspect e ele resolveu, porém tiveram que instalar drivers do android, habilitar depuração, aquela burocracia toda. Agora aconteceu o mesmo só que dessa vez é no Safari, e só no safari do iphone, como não tinha um MAC Book tive que ir a campo procurar alguma ferramenta para me ajudar, então encontrei o Weinre com essa ferramenta o modo de depurar tanto android quanto ios se tornou extremamente simples. E estou escrevendo esse post para mostrar a vocês como usar essa incrível ferramenta.

Oque é Weinre?

[wp_ad_camp_1]

Weinre é uma aplicação command-line escrita em NodeJS, ela cria um console virtual acessado via browser. Assim você pode continuar inspecionando sua página remotamente. Sua integração é muito simples, e seu uso é semelhante as ferramentas para desenvolvedores do firefox.

Como usar?

Primeiro é necessário ter instalado o NodeJS com  o seu gerenciador de pacotes o NPM.

Após ter o NodeJS instalado você precisa abrir seu terminal e digitar os comandos abaixos (para windows, desconsiderar o sudo apenas execute o prompt de comando como administrador):

$ sudo npm install -g weinre

Após instalado, agora você tem o weinre disponível em sua command-line, agora é hora de iniciar ele. Para isso digite o comando abaixo em seu terminal:

weinre --boundHost=0.0.0.0

Após isso o weire vai ficar escultando na porta 8080, e a seguinte mensagem vai aparecer:

2017-06-01T14:03:39.322Z weinre: starting server at http://0.0.0.0:8080

[wp_ad_camp_2]

Agora é só abrir o seu browser no endereço http://localhost:8080/client/#meuprojeto, agora é só acessar uma página padrão do seu projeto e colocar o código abaixo em seu cabeçalho:

<script src="http://SEU_IP_LOCAL:8080/target/target-script-min.js#anonymous"></script>

E pronto é só acessar pelo seu dispositivo e depurar pelo seu computador!

Observação: no script que você vai colocar em seu projeto, lembre-se de colocar o endereço de IP do seu computador e também libere o weinre no firewall quando solicitado.

Obrigado, espero que tenha ajudado!

The post Inspecionando sua página remotamente appeared first on Hiago Silva Souza.