debugging-guide

# Chrome Extension Debugging Guide

## Accessing DevTools

### Extension Management Page
1. Go to `chrome://extensions`
2. Enable **Developer mode** (top right toggle)
3. Click **Details** on your extension
4. Available debugging entry points:
   - **Service Worker** link → Service worker DevTools
   - **Errors** button → View runtime errors

### Different Context DevTools

| Component | How to Access |
|-----------|---------------|
| Service Worker | `chrome://extensions` → Click "Service Worker" link |
| Popup | Right-click popup → "Inspect" |
| Side Panel | Right-click side panel → "Inspect" |
| Options Page | Right-click page → "Inspect" |
| Content Script | Page DevTools → Console → Select extension context |

---

## Service Worker Debugging

### Opening Service Worker DevTools

1. Go to `chrome://extensions`
2. Find your extension
3. Click the "Service Worker" link (shows as "Inactive" or "Active")

### Service Worker Lifecycle

```javascript
// Add lifecycle logging
self.addEventListener('install', (event) => {
  console.log('[SW] Installing...');
});

self.addEventListener('activate', (event) => {
  console.log('[SW] Activated');
});

// Log when service worker starts
console.log('[SW] Service worker loaded at', new Date().toISOString());

// Monitor fetch events
self.addEventListener('fetch', (event) => {
  console.log('[SW] Fetch:', event.request.url);
});
```

### Common Service Worker Issues

**Issue: Service Worker Not Loading**
```javascript
// Check manifest.json
{
  "background": {
    "service_worker": "background.js",  // Verify path
    "type": "module"  // Add if using ES imports
  }
}

// Check for syntax errors
// Open chrome://extensions and look for error badge
```

**Issue: Service Worker Terminating Early**
```javascript
// Keep alive with alarms (not recommended for all cases)
chrome.alarms.create('keepAlive', { periodInMinutes: 1 });

// Better: Design for termination
// - Store state in chrome.storage
// - Re-register listeners at top l