# Debugging Strategies

Systematic approaches to investigating issues.

## The Scientific Method

1. **Observe**: What exactly is happening?
2. **Hypothesize**: Why might this happen?
3. **Test**: Can I reproduce? Does my theory hold?
4. **Conclude**: Root cause identified?
5. **Fix**: Apply minimal change

## Isolation Techniques

### Binary Search

When you don't know where the bug is:

1. Comment out/disable half the code
2. Does the bug still occur?
   - Yes → Bug is in remaining code
   - No → Bug is in removed code
3. Repeat until isolated

### Minimal Reproduction

1. Create new empty project
2. Add minimal code to reproduce
3. If can't reproduce, difference is the clue

## Console Debugging

```typescript
// Log object state
console.log('State:', JSON.stringify(this, null, 2));

// Log with label
console.log('[Component]', 'connectedCallback', this.id);

// Table for arrays
console.table(this.items);

// Trace call stack
console.trace('How did we get here?');

// Time operations
console.time('render');
this.render();
console.timeEnd('render'); // render: 12.34ms
```

## DevTools Techniques

### Breakpoints

```typescript
// Programmatic breakpoint
debugger;

// Conditional (in DevTools)
// Right-click line → Add conditional breakpoint
// Expression: this.value === 'specific'
```

### Watch Expressions

In DevTools Sources panel:
- Add expressions to watch
- See values update at breakpoints

### DOM Breakpoints

In Elements panel:
- Right-click element → Break on
- Subtree modifications
- Attribute modifications
- Node removal

## Network Debugging

1. DevTools → Network tab
2. Check:
   - Request sent? (Status column)
   - Correct URL?
   - Correct headers?
   - Response data?

## Component State Debugging

```typescript
// Expose component for console inspection
connectedCallback() {
  super.connectedCallback();
  (window as any).debugComponent = this;
}

// In console:
// > debugComponent.myState
// > debugComponent.handleClick()
```

## Research When Stuck

```bash
# Search for specific error
web-dev research "[paste error message]" --agent

# Search for behavior
web-dev research "FAST Element property not updating" --agent

# Deep dive
web-dev research "debug FAST Element template binding" --deep --agent
```

## Common Investigation Paths

| Symptom | Investigate |
|---------|-------------|
| Nothing renders | Is component registered? Check imports |
| State not updating | Is property `@observable`? |
| Event not firing | Check event binding syntax `@click` |
| Styles not applying | Check shadow DOM, :host selector |
| Build fails | Check imports, circular deps |
