A apresentação discute a importância da depuração para desenvolvedores, fornecendo um guia rápido em 8 etapas para depuração eficiente e como utilizar as ferramentas de depuração no Visual Studio Code.

1. Debugando em node
Por que? Como?
apresentação
por Jêniffer Nolasco e
Andressa Furlan
Devs PJBank

2. Jêniffer
Nolasco
Andressa
Furlan

3. Depurar é
importante?
Quanto?

4. Se você resolve problemas,
você é muito valioso. Quem
encontra e elimina
efetivamente erros e bugs é
assertivo e efetivo!
É aí que separamos o joio
do trigo, já que depurar é
uma skill essencial para
todo desenvolvedor.

5. A maioria dos
desenvolvedores,
mesmo os altamentes
experientes, se
questionam:
“Devo estudar
linguagens novas do
mercado?? Design
Patterns??”

6. E o engraçado é que a
maioria tendem a ser bem
péssimos debugando.
Uma coisa é escrever
um bom código,
outra é saber
depurar o código
mais ridículo que
você viu
na vida.

7. A boa notícia é que:
Assim como qualquer
outra skill. Podemos
aprender.

8. Mas atenção!!
Debugar não é só
mexer em um depurador
e alterar o código até
que ele pareça funcionar.

9. É um processo que
requer análise e
precisamos ter clareza.
Conhecer o negócio é
fundamental para fazer
uma análise de impacto
e assim sermos
efetivos.

10. Caso Prático

11. Caso Prático

12. Guia rápido
1. Reproduzir o bug.
100% dos problemas que não podem ser
reproduzidos, não podem ser debugados.
1. Caso não consiga fazer o 1º
passo, procure ajuda.
Peça para quem registrou o bug,
reproduzir para você.
But...

13. Guia rápido
3.Se o bug for intermitente.
Isso significa que você não
conhece as circunstâncias
necessárias para reproduzi-lo.
Se é um problema, conseguimos
reproduzir, só precisamos saber como.

14. Guia rápido
4. Encontre como
reproduzir o problema, mesmo
que ele seja reproduzível
apenas em produção.
Se você não entender o problema o
suficiente para recriá-lo, você tem uma
chance muito baixa, de corrigi-lo
acidentalmente por um palpite e terá
muita dificuldade em saber se sua
correção funcionou.

15. Guia rápido
5. Antes de entrar no
código e “ver as coisas”.
Pensem no problema e as
possíveis causas. Você terá
hipóteses ou idéias. Mesmo
assim, se não tiver noção,
ativem o Rubber duck.

16. Guia rápido
6. Quando tiverem 2 ou 3
hipóteses, criem testes
unitários.
Ao escrever o teste de unidade considere
explorar o problema. Com isso se você
estiver certo e encontrar o problema além
de corrigi-lo ainda terá um teste que
verifica a correção. E mesmo se você
estiver errado, acabou de deixar seu
sistema mais confiável adicionando
testes. :)

17. Guia rápido
6. Caso seja extremamente
impossível de criar os testes
para as hipóteses.
Hora de ativar o debugger.
Mas saiba exatamente o que está
procurando. Não adianta usá-lo para dar
“uma olhada”.

18. Guia rápido
7. Dividir para conquistar.
Tente pensar em maneiras de eliminar
uma grande quantidade de código ou
remover uma grande quantidade do
sistema ou variáveis ​​e ainda assim
reproduzir o bug.

19. Last one...
8. Entenda o por que
corrigiu o problema.
Se você não entender por que o que fez
corrigiu o problema, ainda não terminou.
Você pode ter causado sem querer um
problema diferente ou, muito
provavelmente, não corrigiu o problema
original.
Os problemas não desaparecem por
conta própria.

20. Como
Utilizar o
Debugger
no VSCode

21. Abrindo a aba Debug
Para abrir a visualização Debug,
selecione o ícone Debug ( ) na
barra de atividades ao lado do VS
Code.
Atalho: Ctrl + Shift + D

22. Criando o launch.json
O VSCode mantém as configurações de
depuração em um arquivo launch.json
localizado na pasta .vscode em seu
espaço de trabalho (pasta raiz do projeto).
Para criar um arquivo launch.json, abra a
pasta do projeto no VSCode ( Arquivo >
Abrir pasta ) e selecione o ícone ( ) de
configuração na barra superior de exibição
do Debug.

23. Launch / Attach
No VS Code, existem dois modos principais
de depuração, Launch e Attach.
A diferença entre eles é que launch oferece
suporte a inicialização de um programa em
modo debug, enquanto attach se encarrega
de conectar com um aplicativo ou
processo já em execução.
Dependendo do tipo da configuração, são
necessários diferentes atributos.
Configurações prontas:
https://code.visualstudio.com/docs/nodejs
/debugging-recipes

24. Atributos
Launch / Attach
protocol - protocolo de depuração para usar. auto / inspector (>= 6.3) / legacy
port - porta de depuração para usar
address - Endereço TCP / IP da porta de depuração.
sourceMaps - habilita trocando para true.
outFiles - localiza arquivos JavaScript gerados.
restart - reinicie a sessão no término
timeout - ao reiniciar uma sessão, desista após esse número de milissegundos,stopOnEntry -
para imediatamente quando o programa é inicializado.
localRoot - Diretorio raiz do VSCode
remoteRoot - Diretorio raiz do Node.
skipFiles - automaticamente pula os arquivos listados
trace - habilita outputs para diagnóstico.
Atalho: (Ctrl+Space)

25. Breakpoints
O recurso de depuração usando Breakpoint
(Ponto de Parada) é muito útil no
desenvolvimento, já que assim podemos
“navegar” e descobrir o que acontece em
nosso código, em tempo de execução, linha
a linha.
Os breakpoints podem ser adicionados (ou
removidos) ao clicar na margem esquerda
do editor. Nesse momento eles são
automaticamente listados na barra de
debug, com a indicação do arquivo e da
linha onde está localizado.

26. Variables / Watch
Na exibição do Debug existem duas outras
seções chamadas de Variables e Watch
Em Variables, como o nome já diz, as
variáveis marcadas com breakpoint podem
ser inspecionadas e exibidas nessa sessão
ou simplesmente passando o mouse em
cima dela no editor.
Em Watch, você pode adicionar variáveis que
deseja inspecionar seu estado durante toda a
execução da aplicação pelo Debug.

27. OBRIGADO
a todos.
jeniffer.ferreira@superlogica.com
andressa.furlan@superlogica.com

28. git clone
git@github.com:gtsopour/no
dejs-shopping-cart.git