Home / devtools / QUICKSTART

PAN Inspector - Quick Start Guide

Installation (2 minutes)

Step 1: Open Chrome Extensions

  • Open Chrome
  • Navigate to chrome://extensions/
  • Enable "Developer mode" (toggle in top right)

    • Step 2: Load the Extension

  • Click "Load unpacked" button
  • Navigate to the devtools/ directory of your LARC installation
  • Click "Select"

    • Step 3: Verify

  • Look for "PAN Inspector" in extensions list
  • Should show green "Active" status
  • Icon should be visible

    • ✅ Extension installed!

    First Use (1 minute)

    Step 1: Open a PAN Example

    # Open any example with PAN components
open examples/02-todos-and-inspector.html

    Or use any page with .

    Step 2: Open DevTools

    Press F12 or:
    • Mac: Cmd + Option + I
    • Windows/Linux: Ctrl + Shift + I

    Step 3: Find the PAN Tab

    Look for "PAN" tab in DevTools (may be in overflow menu ››)

    Step 4: Interact with Page

    • Add a todo item
    • Toggle a todo
    • Watch messages appear in PAN Inspector!
    ✅ You're using PAN Inspector!

    Quick Test

    Minimal Test Page

    Save this as test-pan-inspector.html:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>PAN Inspector Test</title>
</head>
<body>
  <h1>PAN Inspector Test</h1>
  <button id="btn">Send Test Message</button>
  <div id="output"></div>

  <script type="module" src="../pan-bus.mjs"></script>
  <script type="module" src="../pan-client.mjs"></script>

  <pan-bus></pan-bus>

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

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

    let count = 0;

    document.getElementById('btn').onclick = () => {
      count++;
      client.publish({
        topic: 'test.click',
        data: {
          count,
          timestamp: Date.now(),
          message: `Test message #${count}`
        }
      });
    };

    client.subscribe('test.click', (msg) => {
      document.getElementById('output').innerHTML +=
        `<p>Received: ${msg.data.message}</p>`;
    });
  </script>
</body>
</html>
  • Open in Chrome
  • Open DevTools → PAN tab
  • Click "Send Test Message"
  • See it in PAN Inspector!

    • Features to Try

    1. Filtering

    Type "test" in filter box
→ See only test messages

    2. Message Details

    Click any message row
→ Details panel opens on right
→ See full JSON payload

    3. Replay

    Click "Replay" on any message
→ Message sent again
→ Check console/output

    4. Export/Import

    Click "Export"
→ Download JSON file
Click "Import"
→ Load messages back

    5. Pause/Resume

    Click "Pause"
→ Messages stop appearing
Click "Resume"
→ Messages flow again

    Troubleshooting

    No PAN Tab?

  • Check extension is active: chrome://extensions/
  • Reload extension (click reload icon)
  • Close and reopen DevTools

    • No Messages?

  • Check page has or
  • Check console for errors
  • Try the test page above

    • Extension Won't Load?

  • Chrome version 88+?
  • Check chrome://extensions/ for errors
  • Make sure all files exist in folder

    • Next Steps

  • ✅ Try with real examples: examples/02-todos-and-inspector.html
  • ✅ Test with enhanced bus: examples/17-enhanced-security.html
  • ✅ Read full README: devtools-extension/README.md
  • ✅ Report issues: GitHub Issues

    • Keyboard Shortcuts

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

    Getting Help

    Happy debugging! 🚀