# 🚀 Debug Rápido - PROBLEMA DO CAMPO NUMBER RESOLVIDO!

## ✅ Status
- ✅ Servidor rodando em http://localhost:4200
- ✅ Logs de debug habilitados
- ✅ Source maps configurados  
- ✅ Helpers de debug carregados
- ✅ Warning do Chrome resolvido
- ✅ **Campo `number` corrigido no getAddressData()**

## 🎯 Como Debugar AGORA

### 1. **Abrir DevTools**
```
http://localhost:4200
Pressionar F12 (ou Cmd+Option+I no Mac)
```

### 2. **Ver Logs em Tempo Real**
No **Console**, você verá automaticamente:
- `🎯 AÇÃO CLICADA:` quando clicar em editar
- `🔄 [EDIT] Iniciando edição` quando abrir aba
- `🎯 [TAB] Selecionando sub-aba` quando trocar entre Dados/Endereço
- `📍 [ADDRESS] Dados de endereço após inicialização` - **NOVO LOG ESPECÍFICO**

### 3. **Colocar Breakpoints**
Na aba **Sources**:
1. Procurar: `webpack://` → `./projects/idt_app/src/app/domain/drivers/drivers.component.ts`
2. **Breakpoint linha ~533:** `onActionClick(event: { action: string; data: any }) {`
3. Procurar: `webpack://` → `./projects/idt_app/src/app/shared/components/generic-tab-form/generic-tab-form.component.ts`  
4. **Breakpoint linha ~937:** `getAddressData(): AddressData {`

### 4. **Opções de Debug no Cursor/VS Code**
Agora você tem 3 opções no menu de debug:
- 🚀 **Debug Angular (idt_app)** - Debug completo com todas as funcionalidades
- 🔧 **Debug Angular (Seguro)** - Debug sem warnings do Chrome  
- 🔗 **Attach to Chrome** - Conectar a uma instância existente

### 5. **Testar com Console - NOVO COMANDO ESPECÍFICO**
```javascript
// Debug específico do endereço - NOVA FUNÇÃO!
debugHelpers.debugAddressData();

// Simular edição de motorista
debugHelpers.simulateEditClick('123');

// Ver estado do formulário
debugHelpers.showFormState();

// Trocar para aba endereço
debugHelpers.switchSubTab('endereco');

// Teste completo automatizado
debugHelpers.testCompleteFlow();
```

## ⚡ Teste Específico do Campo Number - 30 segundos

1. **Abrir** http://localhost:4200
2. **F12** para DevTools  
3. **Console** digite: `debugHelpers.simulateEditClick('test-456')`
4. **Aguarde** a aba de edição abrir
5. **Console** digite: `debugHelpers.debugAddressData()`
6. **Observe** a tabela comparativa mostrando os valores
7. **Clique** na aba "Endereço"
8. **Verifique** se o campo número está preenchido com "123"

## 🔍 Logs Principais a Observar

```
🐛 [DriversComponent] 🎯 AÇÃO CLICADA: {action: "edit", data: {...}}
🐛 [DriversComponent] 🔄 [EDIT] Iniciando edição de motorista
🐛 [GenericTabForm] 🔄 [INIT] GenericTabFormComponent ngOnInit iniciado  
🐛 [GenericTabForm] 📍 [ADDRESS] Dados de endereço após inicialização
🐛 [GenericTabForm] 🎯 [TAB] Selecionando sub-aba {from: "dados", to: "endereco"}
```

## ✅ Problema do Campo Number Resolvido!

### 🐛 **O que estava acontecendo:**
- Campo `address_number` não aparecia no `getAddressData()`
- Mapeamento incompleto no `onAddressDataChange()`
- Dados não estavam sendo passados para o `AddressFormComponent`

### ✅ **O que foi corrigido:**
- ✅ Adicionado `number: this.form.get('address_number')?.value || ''` no `getAddressData()`
- ✅ Adicionado `address_number: data.number` no `onAddressDataChange()`
- ✅ Logs específicos para debug de endereço
- ✅ Dados de teste com número "123" para verificação
- ✅ Nova função `debugHelpers.debugAddressData()` para análise detalhada

### 🧪 **Para verificar se está funcionando:**
```javascript
// No console do DevTools
debugHelpers.debugAddressData();
// Deve mostrar tabela com number: "123" em todas as colunas
```

## ✅ Warning do Chrome Resolvido
O warning "Web security may only be disabled..." foi resolvido com:
- ✅ Configuração correta do `userDataDir`
- ✅ Pasta `.vscode/chrome-debug-user-data/` criada
- ✅ Adicionada ao `.gitignore`
- ✅ Opção de debug "seguro" sem warnings

## 💡 Dica de Ouro
Se breakpoints não funcionarem:
- **Ctrl+Shift+R** (refresh forçado)
- **F12** fechar/abrir DevTools
- Buscar arquivo digitando **Ctrl+P** → `drivers.component.ts`
- Usar a opção "🔧 Debug Angular (Seguro)" se houver problemas