Oi, Alexandre! Como vai?
Sim, sua dúvida faz todo sentido e não está se adiantando, não. No mercado, é bem comum usar estratégias de debug que vão além de console.log
.
Veja algumas práticas mais utilizadas no dia a dia com React:
// Exemplo com React Developer Tools
import { useEffect } from 'react';
function ComponenteExemplo() {
useEffect(() => {
debugger; // Interrompe a execução no DevTools
}, []);
return Componente carregado
;
}
O debugger pausa a execução no DevTools do navegador (como o Chrome), assim que o componente for montado.
Outras estratégias comuns:
- React Developer Tools (extensão do navegador)
- Breakpoints direto no DevTools (sem precisar alterar o código)
- Ferramentas como VSCode + Chrome Debugger Extension para debug direto do editor
- Uso de logs estruturados com
console.table()
ou libs como why-did-you-render
// Exemplo usando console.table()
const colaboradores = [
{ nome: 'Ana', cargo: 'Dev' },
{ nome: 'João', cargo: 'Design' }
];
console.table(colaboradores);
Esse formato de log é muito mais legível que vários console.log
soltos.
Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado