# 🐛 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**
```bash
# 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:
```typescript
// 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:
```typescript
// 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:
```javascript
// 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:
```bash
# 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:
```bash
# 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