PostMessage Inspector

Track and monitor postMessage communications between iframes and the main page.

A postMessage debugger for Chrome DevTools. See every window.postMessage call and every message event between your page and its iframes - including cross-origin iframes - in real time, without adding a single console.log. PostMessage Inspector adds a Post Messages panel to DevTools that works like the Network panel, but for cross-frame messaging: a live postMessage logger with filters, a JSON payload viewer and export. No setup. No code changes. Open DevTools and start inspecting. WHY POSTMESSAGE INSPECTOR? postMessage is how iframes, embedded widgets and micro-frontends talk to each other - and it's notoriously hard to debug. Console logs get buried, message events are easy to miss, and cross-origin iframes make it even harder to see what's going on. PostMessage Inspector gives you one place to see every message, its payload, origin and direction. FEATURES Real-time postMessage logger Every postMessage call and message event across every frame - captured the moment it happens. Powerful filtering Search payloads and origins in one filter box (use origin:example.com to match origins only), or tick Invert to hide everything that matches - handy for muting noisy messages. Narrow down further with one-click chips for type (sent / received) and direction (parent → iframe, iframe → parent). Hide the filter bar when you don't need it - filters keep working, just like in the Network panel. JSON payload viewer Click any message to inspect its payload with syntax highlighting - long strings and deeply nested objects included. The Message tab shows the payload with origin, frame and direction metadata; the Payload tab shows just the data. Sortable & resizable columns Sort by time, origin, direction, type, size or frame depth. Right-click the header to show or hide columns. Payload size & frame depth See the byte size of every message and which frame depth it came from. The status bar shows total message count and size. Pause / Resume without data loss Freeze the live feed while messages keep buffering in the background. Keyboard navigation Move through messages with the arrow keys. Export to JSON Save a captured session as a JSON file to share with your team, attach to a bug report or analyze later. Configurable capture limits Control max string length, array items, object keys, nesting depth and binary preview size. Set any limit to 0 to capture everything. Native DevTools look, light & dark Looks and works like the built-in Network panel and follows your DevTools theme. Cross-origin iframe support Works with iframes served from a different origin - no configuration needed. COMMON USE CASES - Debugging micro-frontends that communicate through postMessage - Integrating third-party iframes: payment forms, checkout widgets, sportsbook and game iframes, chat widgets, video players - Tracing messages between a page and an embedded widget or SDK - Finding race conditions and missing or duplicated messages in iframe communication - Verifying the message contract between parent page and iframe during QA - Auditing message event listeners for missing origin validation (postMessage security) WHO IS IT FOR? Frontend developers building embedded widgets, micro-frontends, payment flows and third-party integrations. QA engineers verifying iframe event contracts and catching unexpected message patterns. Security researchers auditing postMessage handlers and cross-origin communication. GETTING STARTED 1. Install the extension 2. Open Chrome DevTools (F12 or Cmd+Option+I) 3. Go to the Post Messages tab 4. Load or interact with any page - messages appear instantly FAQ How do I see postMessage events between a page and an iframe? Open DevTools, switch to the Post Messages tab and reload or interact with the page. Every message delivered to the page or any of its frames appears in the list, with its sender, receiver and direction. Does it work with cross-origin iframes? Yes. Messages are captured in all frames, including iframes from other origins. Do I need to change my code? No. There is nothing to install in your app - no SDK, no console.log, no build step. Can I share captured messages with my team? Yes. Export the session to JSON and attach it to a ticket or bug report. WHAT'S NEW IN v0.4.0 - Now available for Firefox (140+) as well as Chrome - Collapsible JSON: expand and collapse objects and arrays in the payload viewer - Long lines scroll horizontally in the payload viewer; turn on line wrapping with one click - Lighter capture: the extension only listens for incoming messages and never patches postMessage, so pages behave exactly as without it - Removed the Type filter, since every captured entry is a message event - Requires Chrome 121 or newer v0.3.0 - Invert filter: show only the messages that don't match your search, just like Invert in the Network panel - Helpful empty state: reload the page, turn capture back on or clear filters in one click - Cleaner JSON export: payloads are exported once, without internal UI fields - Filter bar adapts to narrow DevTools: chips move to their own row instead of squeezing the search box - Polished alignment and spacing to match native DevTools v0.2.0 - Long strings are no longer cut off in the payload viewer and JSON export - Configurable capture limits - Redesigned panel in the style of the native Network panel - Filter by origin with origin:example.com - Show or hide columns from the table header - Panel follows the DevTools theme