Uma outra ferramenta que passei a usar bastante recentemente, principalmente para debugar códigos de teste unitários, é o terminal de debug do javascript: JavaScript Debug Terminal. Assim posso rodar um único arquivo de teste, por exemplo usando o Jest: 'jest exemplo-teste-unitario.spec'. (excelente vídeo)
9:37 "O VSCode tem uma ferramenta muito legal que é essa barata" kkkkk valeu Diego e equipe da rocketseat aprendi muito com o canal de vocês e ate hoje aprendo
Então é pra isso que serve a baratinha do VS Code... haha... eu sabia que era uma ferramenta de Debug, mas não sabia como configurar. Já configurei em uma aplicação que estou desenvolvendo e já testando. Muito Obrigado.
rapaziada, não se iludam com a velocidade que ele escreve o código, provavelmente ele já escreveu esse mesmo código milhões de vezes ! Programar é muito mais ficar horas olhando pra tela do que digitando. resumindo: não se sinta 'menos' por não programar tão rápido, isso é normal !!! e por ultimo, parabéns pro autor do vídeo, ficou excelente!!!
Revendo o vídeo descobri uma funcionalidade legal do VS Code que é o auto attach. Ctrl (command no macos)+Shift+P > Debug: Toggle Auto Attach e eu sempre seleciono with flag, isso faz o debug já dar o attach sem precisar do play da aba de debug
Ótimo vídeo Diego :) Uma sugestão de podcast seria o tema Desing Pattern, quais vocês (da Rocketseat) acham bacana, quais funcionam no mercado, pontos positivos e negativos, etc
Fiz meu trabalho de estrutura de dados em 2018.2 debuggando puramente pelo printf no terminal. Lembro que na parte final do trabalho eu fiquei mais de um dia debuggando. Algumas semanas depois aprendi a debuggar um programa em C no vscode e resolvi bugs mais complexos em alguns minutos. Rimos muito, meu computador levou dois tiros.
Antigamente eu tinha medo de utilizar debug, pois tinha uma dificuldade de entender as funcionalidades e achava mais pratico utilizar o console.log do Js ou print em Python. Mas depois que comecei a estagiar, utilizando Java no backend em aplicações reais, percebi que utilizar debug é algo obrigatório, até porque não da para ficar escrevendo System.out.println() toda hora sendo que o console já fica co bastante informação relacionada ao proprio servidor da aplicação.
Diego, mostre alguma coisa do Figma, muito show essa ferramenta, eu estava procurando algumas coisas e me deparei com o Aplicativo Figma Mirror que espelha a sua tela de prototipação no seu celular, muito foda mesmo!
Eu não entendi nada... e achei legal mesmo assim! Sou muito novato. Ver tudo isso é maneiro, mas bate aquela insegurança, pois parece impossível lidar com tanta coisa... Mas ainda vou ser um programador minimamente respeitável!
Sou desenvolvedor de aplicações desktop em C#, Delphi, C, C++ e em linguagens Web programo PHP e estou estudando React Native. Mas inventam uma tecnologia pra agilizar a escrita do código, mas praticamente temos que desenvolver outra aplicação de tanta configuração só pra fazer um simples debug do código e ainda assim não consegui fazer funcionar aqui, vou ficar com o bom e velho console.log. Essa é a vantagem em desenvolver aplicações desktop, com apenas um click iniciamos a depuração do código.
Como sempre ótimo video, Diego! Acho q não vou conseguir evitar de usar os console logs, mas com certeza agora vou reduzir bastante!! Sempre quis saber como configurar o debug do vs code usando nodemon, mas nunca encontrava nada muito explicativo. Graças ao seu video finalmente vou conseguir debugar de forma mais direta e menos verbosa!! XD Mais uma vez obrigado pelo conteúdo!! E feliz ano novo!! XD
Eu sou super novato com node/react, e é um dificuldade enorme pra achar conteúdo direto, todo video acaba com varias coisas ao invés do que ta no titulo. O video é ótimo, mas acho que se a pessoa nãos abe debugar no vs code é pq ela realmente ta no começo e jogar outras informações desconexas acho q acaba mais confundindo do que ajudando. Não é bem uma critica ao seu conteúdo, é mais um desabafo pessoal...
Diego, Me tira uma duvida, queria fazer um middware de erro para pegar erros de execução, rotas e gravar isso em um.log teria um video explicativo para isso?
Eu sempre acho estranho ver essas funcionalidades que eu nunca ouvi falar, por exemplo, entendo que call stack é um conceito fundamental do node, mas onde que eu posso encontrar essas informações? ou Heap, ou o -inspect, a documentação do node parece ser muito extensa de informações especificas de mais e não parece ser uma boa fonte. As vezes parece que existe algum local cheio dessas informações que todo mundo sabe menos eu, é muito estranho.
Excelente dica! Obrigado! Consegui configurar para o ReactJS, mas apenas no modo launcher. No modo attach, que é bem melhor, não consegui ainda :( De acordo com a documentação do Chrome Debugger, é necessário iniciar uma instância do Chrome no modo de debug. Alguém sabe como configurar para o React já abrir o Chrome com essa flag de debug? Valeu!
Uma outra ferramenta que passei a usar bastante recentemente, principalmente para debugar códigos de teste unitários, é o terminal de debug do javascript: JavaScript Debug Terminal.
Assim posso rodar um único arquivo de teste, por exemplo usando o Jest: 'jest exemplo-teste-unitario.spec'.
(excelente vídeo)
Faaaala, Sérgio! Valeeeu! 💜
Poxa, que bacana! Valeu demais pela dica! 😉
Parace ser massa e super prático! 👀
9:37 "O VSCode tem uma ferramenta muito legal que é essa barata" kkkkk valeu Diego e equipe da rocketseat aprendi muito com o canal de vocês e ate hoje aprendo
Adorei o vídeo, mas eu queria mesmo, era ver como configurar o Debug do VS para o react e react-native... Abraço !!!
guilherme cardoso de almeida eles ja fizeram algo so n lembro se esta no youtube ou no skylab
@@relfarias puxa muito obrigado ! se vc puder me mandar o link Agradeço muiiiito, eu vou tentar procurar aqui no canal
@@guilhermecardosodealmeida9498 e o cara não mandou...
Então é pra isso que serve a baratinha do VS Code... haha... eu sabia que era uma ferramenta de Debug, mas não sabia como configurar. Já configurei em uma aplicação que estou desenvolvendo e já testando. Muito Obrigado.
Mais uma vida salva...nem todo herói usa capa. kkkk Valeu Diego
Além de manjar sabe ensinar. Parabéns.
show de bola. console.log é valido sempre, mas com certeza o debug desta forma da muito mais opções e controle do que esta acontecendo no código.
Realmente, né!? Muitooo mais completo dessa forma! 😉 💜
Muito bacana essa possibilidade usando node. Recurso bem corriqueiro para nós, desenvolvedores em back com Java(Eclipse) e .NET.(VS Full). Parabéns
rapaziada, não se iludam com a velocidade que ele escreve o código, provavelmente ele já escreveu esse mesmo código milhões de vezes ! Programar é muito mais ficar horas olhando pra tela do que digitando. resumindo: não se sinta 'menos' por não programar tão rápido, isso é normal !!! e por ultimo, parabéns pro autor do vídeo, ficou excelente!!!
Mano que video maravilhoso, eu tava apanhando pra debugar o AWS SAM e não achava nada especifico mas esse video me salvou
console.info("Obrigado, excelente dica, cheguei aqui ! ");
Excelente!!!
Fica uma sugestão para o próximo vídeo: PWA, como fazer a implementação com React Web...
VALEU!!
Maravilha. Principalmente service workers.
Revendo o vídeo descobri uma funcionalidade legal do VS Code que é o auto attach.
Ctrl (command no macos)+Shift+P > Debug: Toggle Auto Attach e eu sempre seleciono with flag, isso faz o debug já dar o attach sem precisar do play da aba de debug
Parabéns pelo excelente vídeo, seria muito interessante mostrar o Debug no ReactJS e no React-Native.
Gostaria de ver esse conteúdo no ReactJS
Kkkk
Eu faço exatamente isso coloco vários console.log("chegou aqui")
Kkkkkk
Ótimo vídeo Diego :) Uma sugestão de podcast seria o tema Desing Pattern, quais vocês (da Rocketseat) acham bacana, quais funcionam no mercado, pontos positivos e negativos, etc
Fiz meu trabalho de estrutura de dados em 2018.2 debuggando puramente pelo printf no terminal. Lembro que na parte final do trabalho eu fiquei mais de um dia debuggando. Algumas semanas depois aprendi a debuggar um programa em C no vscode e resolvi bugs mais complexos em alguns minutos.
Rimos muito, meu computador levou dois tiros.
Vídeo sensacional como sempre. Bom saber que é de boa trabalhar com Debug no Node, tava tão acostumado com o console.log que nunca nem tinha ido atrás
Ótimo vídeo, Parabéns!!!! Fiquei também na vontade para também ver como funcionaria o Debug utilizando o React Native e React!!!!
Antigamente eu tinha medo de utilizar debug, pois tinha uma dificuldade de entender as funcionalidades e achava mais pratico utilizar o console.log do Js ou print em Python. Mas depois que comecei a estagiar, utilizando Java no backend em aplicações reais, percebi que utilizar debug é algo obrigatório, até porque não da para ficar escrevendo System.out.println() toda hora sendo que o console já fica co bastante informação relacionada ao proprio servidor da aplicação.
Muito massa, e seria perfeito o video de debug para front react
Mudou minha vida... Eu que usava o visual studio com C# debugava muito, e sentia falta disso no VS Code.... Muitoooooooooooooooooooooo Obrigado
Muito bom. Pra aplicações React seria ótimo pois é minha principal ferramenta.
Valeu, Diego. Sensacional
Da para fazer um mostrando como debugar no React?
Como fui achar um canal dahora desse final de ano, eu precisava ter conhecimento comesso de 2019
Diego, quais as extensions que vc usa no VSCode pra trabalhar em node js?
Muito bom o vídeo, gostaria de ver como configurar o Debug do VS para o react e react-native... Abraço !!!
opa, só pra saber, saiu algum vídeo sobre debug de aplicações web utilizando React ? valeeeu
Tô ligado aqui, rumbora!!!
Loool. I legit spend 6 years using gms before finally getting serum. I was making blown out saw softs and exporting them to Edison
Kkkkk que aula maneira, minhas análises com console.log são exatamente assim
Yayyy
Thank u!!!
Como sempre otimos conteudos
Preciso aprender debug d node p serveless usando servless offline
Isso vai me ajudar tanto espero
Muito show! Para se livrar de vez do console.log faz com REACT e REACTNATIVE.
Vamos tirar os insetos do code obrigado diego... Rocketseat é top demais...
Xô, barata! 🚫🚫 😂😂😂 Valeu pelo feedback, Fernando! 💜
Muito legal... parabéns pelo Code/Drops...
Diego, mostre alguma coisa do Figma, muito show essa ferramenta, eu estava procurando algumas coisas e me deparei com o Aplicativo Figma Mirror que espelha a sua tela de prototipação no seu celular, muito foda mesmo!
Ótimo vídeo! Agora se for utilizar o expo, como se faz?
Top Diego!! Traz mais Crodrops de Debuggers inclusive usando o Chrome. Show mano.. Massa demais!
Otimo video. Quero muito um video de debug para React e React Native. Hoje eu uso console.log em tudo hahaha, ficam 30 linhas de console haha.
Curti muito, ja estava ha tempos querendo saber sobre o debug no vscode.
O que você está usando no terminal para ter o auto complete?
tambem quero saber
Teria como fazer um vídeo de debug usando o TS?
Achei a idéia bastante legal! Mostra também as técnicas de geração de liga com o winston js ou pino js
Simplesmente sensacional!!!!!!!!! Obrigado
Faaaala, Gabriel! AAAAAAAA! Valeu demais! 💜 😍
Isso aí Diego, nada de ferramenta de debug, é ferramenta da barata (baratinha para os íntimos).
Tras pra gente um vídeo falando de debug em front! Forte abraço!
A explicação que eu precisava. Excelente!
Da próxima poderia usar o debug com react.
Adorei o video, sensacional. Gostaria de saber como debugar no reactJS e react native
Mostra fazendo no react e react native, obrigado pelo conteúdo!!
Vídeo muito daora, quais suas configurações no terminal?
Mesmo assim amo usar meu *console.log* hehe...belo vídeo
Agora falta o vídeo de debug do ReactJS. Abraço !!!
Valeeeu pela sugestão, Alexandre! 💜
Porque não utilizar o require mesmo, ao invés de acrescentar mais código e dependências para utilizar o import ??
Como usar essa ferramenta de debugger juntamente com o docker, como ficaria para inspecionar o container criado ?
Eu não entendi nada... e achei legal mesmo assim! Sou muito novato. Ver tudo isso é maneiro, mas bate aquela insegurança, pois parece impossível lidar com tanta coisa... Mas ainda vou ser um programador minimamente respeitável!
A intro sempre me lembra o programa de "fale com o fábio" do canal The Hardware Show
Exatamente @Larissa Dantas
Diego e comunidade, é possível usar essa estratégia para debugar uma aplicação rodando dentro do docker?
Muito legal...já usava...mas descobri novas funções...queria tb ver xdebug do react e react-native
Sou desenvolvedor de aplicações desktop em C#, Delphi, C, C++ e em linguagens Web programo PHP e estou estudando React Native.
Mas inventam uma tecnologia pra agilizar a escrita do código, mas praticamente temos que desenvolver outra aplicação de tanta configuração só pra fazer um simples debug do código e ainda assim não consegui fazer funcionar aqui, vou ficar com o bom e velho console.log.
Essa é a vantagem em desenvolver aplicações desktop, com apenas um click iniciamos a depuração do código.
SEMANA OMNISTAAAAAAACK!!!!!!
Caramba!! Bota isso no próximo omnistack!!
No C# usando visual studio, nos conseguimos usar o debugger e ir passando linha a linha, mas conseguimos voltar em linhas que já passamos também
como sempre TOP né diegão!
mais um incrivel conteúdo da Rocketseat, salvou o meu dia com esse video kkk
Como sempre ótimo video, Diego!
Acho q não vou conseguir evitar de usar os console logs, mas com certeza agora vou reduzir bastante!! Sempre quis saber como configurar o debug do vs code usando nodemon, mas nunca encontrava nada muito explicativo. Graças ao seu video finalmente vou conseguir debugar de forma mais direta e menos verbosa!! XD
Mais uma vez obrigado pelo conteúdo!! E feliz ano novo!! XD
React native seria muito bom debugzinho né
Quero um curso com vc, vc ensina também pra quem queira iniciar com JavaScript ?
Muito bom Diego.Ótima ferramenta! Valeu!!!
Muito bom o video ! Parabens! Tabem gostaria de saber como voce faz para debugar no react e react native, seria massa!
Obrigada Diego! Seus vídeos são sempre muito bons!
Vaaaleu pelo feedback, Luciana! 💜 Diego é top né? 💜
Eu sou super novato com node/react, e é um dificuldade enorme pra achar conteúdo direto, todo video acaba com varias coisas ao invés do que ta no titulo. O video é ótimo, mas acho que se a pessoa nãos abe debugar no vs code é pq ela realmente ta no começo e jogar outras informações desconexas acho q acaba mais confundindo do que ajudando. Não é bem uma critica ao seu conteúdo, é mais um desabafo pessoal...
Adorei o vídeo e console.log é vida..kkkkkkk BRINKS, mas ainda uso.
cara me ajudou muito!!! Rocket é rocket
Muito bom! Volta com os vídeos de TypeScript!
Fala Diego, qual é esse Shell que você usa?
Muito top, material de extrema qualidade. E pro react fazemos como?
Show de bola, mas seria muito interessante como funciona o debug no react e react-native.
Muito bom o vídeo, parabéns Rocket!
Diego,
Me tira uma duvida, queria fazer um middware de erro para pegar erros de execução, rotas e gravar isso em um.log teria um video explicativo para isso?
Fala Diego, muito massa o vídeo, ajuda dms!
Seria legal um Code/Drops sobre swagger no node
[ ]s
Dica muita fera, thanks.
e o Cypress? vc utiliza?
Like. Bem prático. Se puder usar com o Angular, vou gostar mais ainda.
Seria legal depurar o front no VSCode com attachment. Se houver eu agradeceria um video. :D
Faala Bruno! Valeeu pela sugestão! 💜
Eu sempre acho estranho ver essas funcionalidades que eu nunca ouvi falar, por exemplo, entendo que call stack é um conceito fundamental do node, mas onde que eu posso encontrar essas informações? ou Heap, ou o -inspect, a documentação do node parece ser muito extensa de informações especificas de mais e não parece ser uma boa fonte. As vezes parece que existe algum local cheio dessas informações que todo mundo sabe menos eu, é muito estranho.
Muito bom video, seria legal mostrar debug no React e debug dentro de um contêiner Docker, vlw
O "skipFiles" não está funcionando no request "attach", fica exibindo os processos internos do express. Alguma dica?
E usando babel ou tsc?
Essa ferramenta funciona para o frontend também?
Pelo que entendi, é possível se fazer em aplicações que utilizam o ReactJS e React Native, ou seja, frontend também!^^
Eae mano, tudo bem?
Você poderia fazer um vídeo que mostrasse todos os app que um programador deve usar???
Se baseando nos softwares que você usa??
tem como aplicar isso no angular tbm?
Traz o video de debug em react
Debug no React seria excelente!
Consigo usar esse servidor para testar um site com html, css e js?
Top Cara, parabéns pelo ótimo trabalho! Traz pra nós aí a stack de debug no front end! React e RN
Ótimo video Diego, como sempre conteúdo de qualidade! Gostaria de saber qual é o modelo desse monitor q vc usa?? Vlw
Videos com debug no front, react e react native, pleaaase!
Show! Obrigado!
vou testar agora mesmo obrigada
Falaaa, Jaritsa! Depois conta pra gente como foi! 💜 😍
Excelente dica! Obrigado!
Consegui configurar para o ReactJS, mas apenas no modo launcher.
No modo attach, que é bem melhor, não consegui ainda :(
De acordo com a documentação do Chrome Debugger, é necessário iniciar uma instância do Chrome no modo de debug. Alguém sabe como configurar para o React já abrir o Chrome com essa flag de debug?
Valeu!