Postmessage Inspector

PostMessage Inspector

Debug iframe communication without touching a single line of code.

PostMessage Inspector adds a dedicated Post Messages tab to Chrome DevTools, giving you instant, real-time visibility into every postMessage flowing between your page and its iframes - across all frames, all origins, all directions.

No setup. No build step. Just open DevTools and start inspecting.

WHY POSTMESSAGE INSPECTOR?

postMessage is the backbone of modern iframe communication - but it's notoriously hard to debug. Console logs get buried, events are easy to miss, and cross-origin frames make things even messier. PostMessage Inspector was built to fix that.

Whether you're tracing a subtle race condition, verifying a third-party integration, or auditing security boundaries, you'll have everything you need in one place.

FEATURES

Real-time capture
Every postMessage send and receive across every frame - caught the moment it happens, displayed instantly in the panel.

Powerful filtering
Slice through the noise. Filter by origin, keyword, event type, or direction (sent / received) to zero in on exactly what matters.

Full JSON payload viewer
Click any message to inspect its complete payload with syntax highlighting. Switch to Compact Mode to focus on the data and nothing else.

Sortable & resizable columns
Sort by time, origin, direction, size, or frame depth. Resize columns to fit your workflow.

Payload size & frame depth
See the byte count of every message and track exactly which frame depth it originated from.

Pause / Resume - without data loss
Freeze the live feed at any moment. Messages keep buffering in the background, so you never miss anything when you resume.

Keyboard navigation
Move through messages with arrow keys - fast, focused, no mouse required.

Export to JSON
Capture a session and export all messages as a JSON file for sharing, archiving, or deeper analysis.

Light & dark theme
Follows your system preference automatically. Looks right wherever you work.

Cross-origin iframe support
Works even when iframes are served from a different origin - no special configuration needed.

WHO IS IT FOR?

Frontend developers building embedded widgets, payment flows, or third-party integrations.
QA engineers verifying iframe event contracts and catching unexpected message patterns.
Security researchers auditing postMessage handlers for origin validation vulnerabilities.

GETTING STARTED

1. Install the extension
2. Open Chrome DevTools (F12 or Cmd+Option+I)
3. Navigate to the Post Messages tab
4. Load or interact with any page - messages appear instantly

That's it.