Vídeo muito bom e explicações excelentes! Complementando o que mencionou sobre o Facebook utilizar o console para alertar o usuário, a aplicação nativa do Discord (feita com Electron) também faz isso. Apertando Ctrl + Shift + I (Windows) abre o console na aplicação exibindo as mensagens :)
Sensacional o conteúdo! Queria deixar como sugestão fazer um vídeo de como tirar o máximo do Chrome DevTools, eu só uso o console, as outras abas não faço ideia para que servem.
Que bom que curtiu Thiago. Sim, a ideia é que este tenha sido apenas o primeiro episódio de uma série que vai justamente focar em usos das ferramentas dev ... fica de olho e ajuda nois divulgando :)
Uso muito o console para encontrar vulnerabilidades, é de longe uma das ferramentas mais interessantes para desenvolvimento e para o hacking também e pouca gente usa.
@@FelipeNascimentodeMoura exatamente, em 4 anos atuando nessa área eu já vi coisas bem graves vazando pelo console, porém não uso apenas para isso, existem algumas funções interessantes para o console, outra coisa que uso com frequência é o debugger, essa belezinha é perfeita para encontrar XSS em sites, na real a Dev Tools dos navegadores são ferramentas perfeitas para o hacking se o profissional souber usar corretamente, um tempo atrás foi encontrado um XSS no buscador da Google justamente usando isso 😊
Muito bom ta de parabéns ! Eu também tenho o costume de usar o console ate que descobri um pacote DEBUG no npm. O Legal dela que só aparece os logs quando usa uma variável de ambiente chamada DEBUG. Isso em backend. Mas adorei sua solução para colocar em produção.
Boa, existem outras soluções parecidas mesmo...a ideia ali era mostrar uma forma rápida e pratica, com meia dúzia de linhas a mais ono código :) Valeu, Fernando
Sim, concordo com você , mas a solução que você colocou para questões de múltiplos senário, como dev e produção, achei fantástico pois é menos uma dependência de pacote .
@@FelipeNascimentodeMoura não consegui configurar, o "tokenColorCustomizations" não permite alterar o fontName, qual bruxaria vc fez pra setar apenas as strings como handwriting? lol
Simmm, existem funcionalidades focadas em performance. Nesse vídeo eu ainda não quis entrar neste mérito, mas tenho a intenção de aprofundar só em técnicas para detectar gargalos :)
Segue a soluçao para os "navegadores" Internet Explorer, pois nao é aceito o array de parametros na assinatura da funcao (... args), erro SCRIPT1010: Expected identifier : console.log = function() { let args = new Array(arguments.length); for (let len = args.length, key = 0; key < len; key++) { args[key] = arguments[key]; } if (isDev()) { originalConsoleLog.apply(console, args); } } ou simplesmente: originalConsoleLog.apply(console, arguments);
A quantidade de funcionalidades do dev tools eh gigantesca.. vale ateh uma serie de videos soh p isso... achei um artigo c bastante coisa... spyrestudios.com/getting-started-with-chrome-developer-tools-advanced-devtools/
group e count, eu não conhecia!! Muito bom o/
legais, né. Eu acho muito úteis, em especial o groupCollapsed :)
Melhor dica foi a do alert
tecnica de numero do log é uma boa, valeu a dica
legal, valeu Rodrigo, que bom que foi útil
vcs explodiram a minha mente com esse vídeo!, não sabia q o console tinha tanto poder assim.
Que legal Sky :)
Acompanha a gente por aqui, que vai rolar mais materiais parecidos
Fechado com chave de ouro o famoso alert hehehe. Parabéns pelo vídeo!
Vídeo muito bom e explicações excelentes! Complementando o que mencionou sobre o Facebook utilizar o console para alertar o usuário, a aplicação nativa do Discord (feita com Electron) também faz isso. Apertando Ctrl + Shift + I (Windows) abre o console na aplicação exibindo as mensagens :)
Boa. É uma técnica que faz sentido mesmo, né. Acaba protegendo uma galera mais leiga que pode ter sido induzida a copiar e colar algo ali.
@@FelipeNascimentodeMoura Sim! Infelizmente o que não falta no mundo é gente mal-intencionada.
Não conhecia o group, fica muito mais organizado.
Fica né! Eu gosto de tentar manter o console sempre o mais limpo e organizado possível e ele ajuda bastante!
Muito maaaaassa!
Sensacional o conteúdo! Queria deixar como sugestão fazer um vídeo de como tirar o máximo do Chrome DevTools, eu só uso o console, as outras abas não faço ideia para que servem.
Que bom que curtiu Thiago.
Sim, a ideia é que este tenha sido apenas o primeiro episódio de uma série que vai justamente focar em usos das ferramentas dev ... fica de olho e ajuda nois divulgando :)
Eu não sei como expressar a minha gratidão por ter me ensinado sobre o group e especialmente o groupcolapsed
Quel egal Helton.
Metodozinho útil mesmo, né?! Eu gosto de tentar manter meu console o mais limpo possível :)
Uso muito o console para encontrar vulnerabilidades, é de longe uma das ferramentas mais interessantes para desenvolvimento e para o hacking também e pouca gente usa.
É verdade...como comentei ali, é importante cuidar o que pode acabar caindo no console e dando pistas a pessoas mal intencionadas, né!
@@FelipeNascimentodeMoura exatamente, em 4 anos atuando nessa área eu já vi coisas bem graves vazando pelo console, porém não uso apenas para isso, existem algumas funções interessantes para o console, outra coisa que uso com frequência é o debugger, essa belezinha é perfeita para encontrar XSS em sites, na real a Dev Tools dos navegadores são ferramentas perfeitas para o hacking se o profissional souber usar corretamente, um tempo atrás foi encontrado um XSS no buscador da Google justamente usando isso 😊
Caracas conteúdo massa , poderia criar um mini curso semelhante a esse com js 🖖🖖🤞
Muito bom ta de parabéns !
Eu também tenho o costume de usar o console ate que descobri um pacote DEBUG no npm. O Legal dela que só aparece os logs quando usa uma variável de ambiente chamada DEBUG. Isso em backend.
Mas adorei sua solução para colocar em produção.
Boa, existem outras soluções parecidas mesmo...a ideia ali era mostrar uma forma rápida e pratica, com meia dúzia de linhas a mais ono código :)
Valeu, Fernando
Sim, concordo com você , mas a solução que você colocou para questões de múltiplos senário, como dev e produção, achei fantástico pois é menos uma dependência de pacote .
Essa técnica de aplicar console.log só no ambiente de produção é muito útil, não sabia disso kkkkk
Só queria saber que fonte é essa que você usa no VSCODE?? Hahaha achei animal demais!!
hehe eu uso 'Fira Code iScript' e 'Fira Code' configurado pra deixar em handwriting as strings e ter font ligatures tambem :)
@@FelipeNascimentodeMoura não consegui configurar, o "tokenColorCustomizations" não permite alterar o fontName, qual bruxaria vc fez pra setar apenas as strings como handwriting? lol
Comentei também com um amigo e ele mencionou que tem um console.time também que pode ajudar com tempo de resposta de alguma função ou algum processo.
Simmm, existem funcionalidades focadas em performance. Nesse vídeo eu ainda não quis entrar neste mérito, mas tenho a intenção de aprofundar só em técnicas para detectar gargalos :)
Segue a soluçao para os "navegadores" Internet Explorer, pois nao é aceito o array de parametros na assinatura da funcao (... args), erro SCRIPT1010: Expected identifier :
console.log = function() {
let args = new Array(arguments.length);
for (let len = args.length, key = 0; key < len; key++) {
args[key] = arguments[key];
}
if (isDev()) {
originalConsoleLog.apply(console, args);
}
}
ou simplesmente:
originalConsoleLog.apply(console, arguments);
Qual é a fonte ou ext. que tu está utilizando no code que traz os imports cursivos?
Qual extensão você usa para deixar os comentários com letra cursiva?
debug is on the table
haha pega o inseticidaaaa!!!
console.trace e console.time
Ah, boa Lucas.
O .time eu deixei pra falar em outro video mais focado em performance, mas o .trace eu esqueci completamente, mesmo.
A quantidade de funcionalidades do dev tools eh gigantesca.. vale ateh uma serie de videos soh p isso... achei um artigo c bastante coisa... spyrestudios.com/getting-started-with-chrome-developer-tools-advanced-devtools/
Sim, a ideia é este vídeo ter sido apenas o primeiro de uma série, Rafael.
O segundo vídeo já ta no forninho ;)
Pelo seu cabelo, deve ter dado trabalho. Portando vale a pena o conteúdo! hahaha
hahaha sim...me escabelei produzindo esse vídeo ae!
Pô, sacanagem essa fonte, 12:11 é o log do Chico Xavier com mal de parkinson durante um terremoto orra, se eu fosse seu pai te deixaria de castigo.