Professional debugging and inspection tool for Page Area Network (PAN) message bus.
Real-time monitoring, powerful filtering, and message replay for LARC applications.
Get started in minutes with the PAN Inspector DevTools extension
Clone the devtools repository to your local machine:
git clone https://github.com/larcjs/devtools.git
Navigate to chrome://extensions/ and enable "Developer mode" in the top right corner.
Click "Load unpacked" and select the devtools-extension/ folder from the cloned repository.
Open Chrome DevTools (F12) on any page. Look for the "PAN" tab to confirm successful installation.
Test the PAN Inspector with this simple example
<!DOCTYPE html>
<!-- Save as test.html and open in Chrome -->
<html>
<head>
<script type="module" src="../pan-bus.mjs"></script>
<script type="module" src="../pan-client.mjs"></script>
</head>
<body>
<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>
1. Save the code above as test.html
2. Open it in Chrome
3. Open DevTools → PAN tab
4. Click "Send Test Message"
5. See messages appear in the inspector!
| Key | Action |
|---|---|
| Ctrl/Cmd + K | Focus filter input |
| Ctrl/Cmd + L | Clear messages |
| Esc | Close details panel |
| Space | Pause/Resume recording |
Install the PAN Inspector and start debugging your LARC applications today