testes/Modulos Angular/projects/idt_app/docs/debugging/DEBUG_GUIDE.md

🐛 Guia de Debug - DriversComponent e GenericTabFormComponent

✅ Servidor Configurado

O servidor Angular está rodando em modo debug na porta 4200 com:

• Source maps habilitados
• Optimization desabilitada
• Configuração development

🎯 Como Usar o Debug

1. Abrindo o DevTools do Chrome

# Acesse: http://localhost:4200
# Pressione F12 ou Ctrl+Shift+I (Cmd+Option+I no Mac)

2. Encontrando os Arquivos Fonte

No DevTools:

1. Vá para a aba Sources
2. Navegue para: webpack:// → ./projects/idt_app/src/app/domain/drivers/
3. Abra: drivers.component.ts
4. Navegue para: webpack:// → ./projects/idt_app/src/app/shared/components/generic-tab-form/
5. Abra: generic-tab-form.component.ts

3. Logs de Debug Habilitados

Os seguintes logs estão ativos no console:

DriversComponent:

• 🎯 AÇÃO CLICADA: - Quando clicar em botões da tabela
• 🔄 [EDIT] Iniciando edição - Ao abrir aba de edição
• 🔄 [NEW] Criando novo motorista - Ao criar novo
• 🎯 [TAB] Aba selecionada - Ao trocar de aba

GenericTabFormComponent:

• 🔄 [INIT] GenericTabFormComponent ngOnInit iniciado - Ao inicializar
• 🔄 [FORM] Inicializando formulário - Ao criar o formulário
• 🎯 [TAB] Selecionando sub-aba - Ao trocar entre Dados/Endereço
• 🔄 [ADDRESS] Dados de endereço alterados - Ao alterar endereço

4. Pontos de Breakpoint Recomendados

No DriversComponent:

// Line ~533 - onActionClick
onActionClick(event: { action: string; data: any }) {
  debugger; // 👈 COLOCAR BREAKPOINT AQUI
  this.debugLog('🎯 AÇÃO CLICADA:', { action: event.action, data: event.data });

// Line ~1431 - editDriver
async editDriver(driverData: any): Promise<void> {
  debugger; // 👈 COLOCAR BREAKPOINT AQUI
  this.debugLog('🔄 [EDIT] Iniciando edição de motorista', {

No GenericTabFormComponent:

// Line ~573 - ngOnInit
ngOnInit() {
  debugger; // 👈 COLOCAR BREAKPOINT AQUI
  this.debugLog('🔄 [INIT] GenericTabFormComponent ngOnInit iniciado', {

// Line ~873 - selectSubTab
selectSubTab(tab: string) {
  debugger; // 👈 COLOCAR BREAKPOINT AQUI
  this.debugLog('🎯 [TAB] Selecionando sub-aba', {

5. Como Testar Passo a Passo

Cenário 1: Editar Motorista

1. Abra http://localhost:4200
2. Navegue para Motoristas
3. Clique em "Editar" em qualquer linha
4. Observe no console: 🎯 AÇÃO CLICADA: e 🔄 [EDIT] Iniciando edição
5. Breakpoint vai parar no onActionClick e depois no editDriver

Cenário 2: Trocar Sub-abas

1. Com um motorista aberto para edição
2. Clique na aba "Endereço"
3. Observe no console: 🎯 [TAB] Selecionando sub-aba
4. Breakpoint vai parar no selectSubTab

6. Console Commands Úteis

No Console do DevTools:

// Ver estado atual do componente
$ng0 // ou $ng1, $ng2... dependendo do elemento selecionado

// Ver todas as abas abertas
$ng0.getDriverTabs()

// Ver configuração atual
$ng0.getActionConfig()

// Testar logs manualmente
$ng0.debugLog('Teste manual', { teste: true })

// Forçar seleção de sub-aba
$ng0.selectSubTab('endereco')

7. Verificação de Source Maps

Se os breakpoints não funcionarem:

1. No DevTools, vá para Settings (F1)
2. Em Sources, verifique se está marcado:
   • ✅ Enable JavaScript source maps
   • ✅ Enable CSS source maps

8. Acompanhar Fluxo Completo

Para acompanhar todo o fluxo de edição:

1. Console aberto para ver logs
2. Breakpoint em onActionClick
3. Clicar em editar na tabela
4. Step into (F11) para seguir execução
5. Observar criação da aba e inicialização do formulário

🚨 Troubleshooting

Breakpoints não funcionam:

# 1. Limpar cache do navegador
Ctrl+Shift+R (Cmd+Shift+R no Mac)

# 2. Recarregar DevTools
F12 para fechar, F12 para abrir

# 3. Verificar se está no arquivo certo
Procurar por "GenericTabFormComponent" na busca do Sources

Source maps não carregam:

# Restart do servidor
npm run start-debug

✅ Checklist Antes de Debugar

• Servidor rodando em localhost:4200
• DevTools aberto (F12)
• Console visível para logs
• Sources tab aberta
• Arquivos TypeScript visíveis em webpack://
• Breakpoints colocados nos pontos estratégicos