[Dúvida] Debug de um componente, ou ate componente que chama outro componente

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