PAN Inspector - Chrome DevTools Extension

Professional debugging and inspection tool for Page Area Network (PAN) message bus.

!PAN Inspector Screenshot

Features

🔍 Real-Time Message Monitoring

• Captures all PAN messages (publish, deliver, subscribe)
• Shows message details: topic, data, timestamp, target, size
• Color-coded message types for quick identification

🎯 Powerful Filtering

• Filter by topic, type, or data content
• Toggle message types on/off
• Search across all message properties

📊 Message Inspector

• Detailed view of message payload
• JSON formatting with syntax highlighting
• Copy message as JSON

🔄 Message Replay

• Replay any captured message
• Perfect for debugging and testing
• Works with live applications

💾 Export/Import

• Export message logs as JSON
• Import logs for analysis
• Share debugging sessions with team

⏸️ Recording Control

• Pause/resume message capture
• Clear message history
• Real-time message counter

Installation

From Source (Development)

git clone https://github.com/larcjs/devtools.git
   cd devtools

From Chrome Web Store (Coming Soon)

Once published, install directly from the Chrome Web Store.

Usage

Basic Usage

F12 or Right-click → Inspect

DevTools → PAN (tab)

Features Walkthrough

#### Filtering Messages

Type in filter box: "user.login"
→ Shows only messages matching "user.login"

Uncheck "Publish" → Hides all publish events
Uncheck "Subscribe" → Hides all subscribe events

Search "error" + Uncheck "Deliver"
→ Shows only publish/subscribe with "error" in data

#### Viewing Message Details

#### Replaying Messages

Click "Replay" button → Message sent again

1. Select message
2. Click "Replay Message"
3. Message dispatched on page

Test how components handle specific messages
without needing to trigger the action again

#### Export/Import

1. Click "Export" button
2. Save JSON file
3. Share with team or keep for records

1. Click "Import" button
2. Select JSON file
3. Messages loaded into inspector

- Reproduce bugs from production logs
- Share debugging sessions
- Compare message flows

Examples

Debugging a Login Flow

Testing Error Handling

Performance Analysis

Keyboard Shortcuts

| Key | Action | |-----|--------| | Ctrl/Cmd + K | Focus filter input | | Ctrl/Cmd + L | Clear messages | | Esc | Close details panel | | Space | Pause/Resume recording |

Troubleshooting

"No messages appearing"

// Test in console
import { PanClient } from './pan/core/pan-client.mjs';
const client = new PanClient();
client.publish({ topic: 'test', data: { hello: 'world' } });
// Should appear in PAN Inspector

"Replay not working"

Check console for errors
Look for "PAN DevTools" messages

"Extension not loading"

Reload extension:
chrome://extensions/ → Click reload icon

Architecture

Message Flow

Page Context (PAN Bus)
   ↓ (CustomEvent intercept)
Injected Script (src/injected.js)
   ↓ (postMessage)
Content Script (src/content-script.js)
   ↓ (chrome.runtime.sendMessage)
Background Service Worker (src/background.js)
   ↓ (port.postMessage)
DevTools Panel (panel.html/js)
   ↓ (Render)
User Interface

Files Overview

devtools-extension/
├── manifest.json          # Extension config (Manifest V3)
├── devtools.html/js       # DevTools entry point
├── panel.html             # Main UI
├── src/
│   ├── devtools.js        # Panel creator
│   ├── background.js      # Message router
│   ├── content-script.js  # Bridge script
│   ├── injected.js        # Page context interceptor
│   └── panel.js           # UI logic
├── styles/
│   └── panel.css          # DevTools-style UI
└── icons/
    └── icon-*.png         # Extension icons

Development

Building

No build step required! Pure JavaScript.

Testing

Debugging

chrome://extensions/ → Inspect views: service worker

DevTools → Console → Filter: [PAN DevTools]

Right-click PAN tab → Inspect

Contributing

Roadmap

v1.1

• [ ] Timeline view (visual message flow)
• [ ] Performance metrics
• [ ] Message stats dashboard
• [ ] Dark mode toggle

v1.2

• [ ] Network waterfall view
• [ ] Message diff tool
• [ ] Breakpoints on topics
• [ ] Advanced filters (regex, JSON path)

v1.3

• [ ] Record/replay sessions
• [ ] Test generation from recordings
• [ ] Playwright integration
• [ ] Export to HAR format

Known Issues

Browser Support

• ✅ Chrome 88+ (Manifest V3)
• ✅ Edge 88+ (Chromium-based)
• ⏳ Firefox (Coming soon - needs Manifest V2 version)
• ❌ Safari (Not supported - WebExtensions API differences)

Privacy

This extension:

• ✅ Does NOT collect any data
• ✅ Does NOT make external network requests
• ✅ Does NOT track usage
• ✅ Only runs on pages you inspect
• ✅ All data stays local in DevTools

License

MIT License - Same as PAN framework

Credits

Built with ❤️ by the PAN team

Inspired by:

• Chrome DevTools Network panel
• Redux DevTools
• Vue DevTools

Support

• 📖 Documentation
• 🐛 Report Issue
• 💬 Discussions

Quick Start Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>PAN Inspector Test</title>
</head>
<body>
  <script type="module" src="../pan-bus.mjs"></script>
  <script type="module" src="../pan-client.mjs"></script>

  <pan-bus></pan-bus>

  <button id="test-btn">Send Test Message</button>

  <script type="module">
    import { PanClient } from '../pan-client.mjs';

    const client = new PanClient();
    await client.ready();

    document.getElementById('test-btn').onclick = () => {
      client.publish({
        topic: 'test.click',
        data: { timestamp: Date.now() }
      });
    };

    // Subscribe to see it work
    client.subscribe('test.*', (msg) => {
      console.log('Received:', msg);
    });
  </script>
</body>
</html>