Olá, tudo bem? No vídeo de hoje eu quero lhe ensinar como fazer as configurações do VS Code para conseguir debugar suas aplicações Node.js e ReactJS, com a ferramenta de debug mesmo, sem aquele monte de console.log que eu sei que você usa hoje, hahaha.
Referências:
– Meus cursos: https://www.luiztools.com.br/meus-cursos?utm_source=yt&utm_medium=link&utm_campaign=meus-cursos&utm_content=debug
– Meus livros: https://www.luiztools.com.br/meus-livros?utm_source=yt&utm_medium=link&utm_campaign=meus-cursos&utm_content=debug
– Redes Sociais: https://about.me/luiztools
Um abraço e sucesso.
Prof. Luiz
—
o Olá tudo bem Aqui é Luís e no vídeo de
hoje eu vou lhe mostrar como que você
configura o debug de aplicações node JS
e de aplicações reaction DS no vs code
então se você assim como eu já queimou
os neurônios algum dia tentando fazer
funcionar esse de manga e não conseguiu
É nesse vídeo que você vai aprender
Então vamos lá ó
[Música]
E aí
[Música]
e vamos começar aqui então entrando na
pasta onde eu vou criar esse projeto
para a gente fazer os testes de Burke ou
criar que uma pasta testes de Bank certo
e dentro de testes de bugue eu vou criar
um projeto no JS vamos começar mostrando
debug no node.js tão para criar um canal
de até 50 se eu tenho que ficar aqui
programando pagando por uma coisa que
não é do interesse de vocês neste
tutorial aqui no canal tem vários outros
vídeos que você pode está assistindo
para aprender programação no JS eu vou
utilizar vai com o pé direito é um caso
você não tenha instalado em nossa
máquina e você quiser comprar o tutorial
igual vou fazer aqui fazendo PM –
g-express traço direita para isso
comando Global você tem que ter
permissão administrador e depois daqui
perna entre instalado você usa o comando
Express debug node JS Express o nome do
projeto que você vai criar ele caiu
pronto para você você entra dentro do
projeto roda um npm Install e roda
bom estar com isso você vai colocar os
três mil uma aplicação Express rodando
diesel queremos depurar essa aplicação
agora vamos abrir ela aqui no vs code na
old projects
a caixa de bugue debug node JS somos vir
aqui no Roots index Vamos colocar aqui
um break-point na linha sei se que a
linha que é chamada quando a gente faz
um jet na rota raiz na do nosso projeto
como é que a gente de por agora eu venho
aqui na opção Run in the Bank
eu clico aqui na opção Create out.de is
on fire
eu escolhi aqui no DJ s Eu não vou usar
esta configuração que me adicionou aqui
eu vou apagar ela e vou clicar aqui em
baixo no botão de é the configuration aí
eu vou escolher a opção node.js até
titut o processo vou colocar o nome aqui
debug node JS o nome que eu quiser e tá
pronta a minha configuração
e agora quando eu der um comando F5 ele
vai procurar na minha máquina processo
no de Atlético já estejam rodando então
aplicação já tem que estar rodando e
basta você clicar nela e vai começar o
de blog eu vou ter essa toolbar aqui né
que eu posso usar para controlar o the
Bank se eu pegar um refresh na página ó
ele foi parar lá no break Point eu posso
passar o mouse em cima das variáveis
para ver o que tem dentro de cada uma
delas certo
e eu posso avançar linha a linha com F10
eu posso entrar no detalhe de alguma
função com f11 posso sair de uma função
com o chip chefe 11 posso reiniciar o
teste posso continuar a ignorar o
break-point ou eu posso ainda de taxar o
processo né desconectar o de block Tá
bom então aqui passei uma linha
e eu tinha passo indo até onde eu achar
que eu quero executar passo a passo até
encontrar o problema que eu tô demorando
né
a beleza com isso a gente finalizou a
exibição de the bug no node.js
o que era só isso que eu estava
procurando você conseguiu Espero que
tenha funcionado para você e para mim
que agora você já quer sair do vídeo já
quer fechar e tal para fazer alguma
coisa eu lhe peço que antes sair né que
você retribuo o favor que eu lhe fiz
deixando o like no vídeo se inscreva no
canal se você ainda não inscrito e
deixando e nos comentários se esse vídeo
te ajudou não se ele foi objetivo se
você gostou da didática agora se você
quer aprender também a fazer debug react
continue comigo tem mais metade do vídeo
pela frente agora eu quero mostrar como
é que você pode fazer o debug do Heat vs
Anthony a pasta teste de bugue eu vou
criar também um projeto utilizando um
template vai ser utilizando o
create-react-app então ele peixes
create-react-app’ o nome do projeto que
vou chamar de debug traço rgs só que vai
baixar vai executar as utilitário vai
criar a pasta parecendo um que eu fiz
ali com o Express generator no caso
Donald na enquanto ele baixa vai no seu
vs code na opção aqui de extensões
procura a
foto de Burger for Chrome essa primeira
aqui para mim já está instalada Você vai
clicar no botão de instalar que a gente
vai utilizar elas vai depurar o react
através de uma sessão do Google Chrome
agora que terminou a criação do projeto
Buriti eu vou entrar na pasta e vou dar
um npm start conta aqui a prato de
exemplo rodando funcionando vamos ver
como é que se dê por ele depois a
extensão instalada do Chrome você vai
abrir né o projeto que a gente acabou de
criar nude projeto teste de Bank debt or
Direct nós vamos vir aqui em ser-se fds
eu vou colocar um break-point que a
linha cinco ó que a linha do retorno do
ERP quer quando abre a página né sua
página inicial que fica rodando logo
Direct vou botar um breakpoint aqui você
faça a gente identificar tá funcionando
agora eu quero depurar essa aplicação
iett eu clico aqui em brandebuque great
about this on fire on
ó e vou escolher a opção aqui ó Chrome
aqui é só para eu fazer um ajuste eu vou
trocar esse nome aqui mas botar debug
react EA URL eu tenho que decorar em
cima de local roxo 3 mil que é a porta
que tá rodando a minha aplicação dele
aqui certo então salvei aqui agora
quando eu der um F5 ele vai abrir uma
verdade Google Chrome que vai iniciar
decoração automaticamente né como aquela
página inicial já tá com grande porte já
mudou o fluxo para cá e assim como eu
fiz a noite eu posso avançar alinha
alinhar entrar dentro de funções
reiniciar os testes pausar o coração e
assim por diante mostrando que está
funcionando também a depuração para o
iett JS Mas esse eu tenho um monorepo
com os dois projetos dentro né Eu tenho
um beck node1 front indirect Eles estão
no mesmo repositório como é que eu me
organizo para fazer o debug eu vou vir
aqui em ontem
o nude projeto vou na pasta testes de
bug mas naquela é nosso Mano Reco
e eu tenho dentro ó de blog não jsd bug
with GS seu Abrir eles ficaram a
pastinha. Vs code dentro de cada um
deles tá vendo só que o problema se
pratinhos estarem dentro É que na
verdade a pastinha. Vs code ela tem que
tar na raiz do projeto como um todo se
ele for um monorepo mas não adianta para
dentro de cada uma dos subprojetos a
menos que eu abra eles individualmente
então nós vamos criar uma outra
configuração a nível raiz do repositório
vem aqui em Goiânia the Bank crachá
utilizou fahion vou colocar tio Chrome
tá tanto faz e nesse arquivo aqui que
ele vai estar aqui na raiz do
repositório fora dos projetos eu vou
colocar as configurações de ambas na
região das operações Vamos colocar aqui
a configuração do Chrome
Tá certo, e vou colocar a configuração
Donald
é só configuração objeto que eles vão de
configuração
a beleza agora que eu tô no meu projeto
com todo ele aberto né com os dois
subprojetos dele se você vier aqui no
randburg eu posso selecionar aqui em
cima se eu for executar o debug do node
ou se eu vou executar o debug do hit da
coderte cinco ele vai dar a esta
configuração aqui está selecionada Até
onde eu sei não é possível rodar os dois
e vamos ao mesmo tempo mas se você
souber de alguma coisa né que eu não
saiba deixa aí nos comentários para
ajudar a audiência também né aprender
mais sobre debug no vs code se esse
vídeo te ajudou de Foi útil se funcionou
aí para você né Deixa o seu like se
inscreve no canal para receber novos
vídeos como esse e dá uma olhada na
descrição porque esse tutorial aqui bem
como mais de 400 outros você encontra no
meu blog eu tenho certeza que eles podem
ajudar Combinado então abraço e até a
próxima valeu.
Olá, tudo bem?
O que você achou deste conteúdo? Conte nos comentários.