PostMessage Inspector

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

Every message event received by the page and its frames - captured the moment it arrives. Message handlers with source locations The Handlers tab shows the message listeners that were registered on the receiving window when the message arrived, in the order the browser called them. For each one you see where it was registered (click a location to open it in Sources) and its source code - useful for tracking down who handles a message and for auditing origin checks. Choose how much of each handler's source to keep in Settings. Noise rules Real pages are full of messages that have nothing to do with your app. Built-in rules hide common chatter from developer tools, browser extensions, dev servers and ad iframes out of the box. Right-click any message to hide its origin or its type with one click, or add your own rules by origin or payload field in Settings. Every rule can be switched off, the status bar shows how many messages are hidden, and turning off Hide noise under More filters brings them all back, dimmed so they're easy to tell apart. 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. Narrow down further with one-click direction chips (parent → iframe, iframe → parent, self, other). 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 the depth of the frame that received it. 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 shortcuts Move through messages with the arrow keys, focus the filter with Cmd/Ctrl+F, pause with Cmd/Ctrl+E, clear with Cmd+K / Ctrl+L and close the details pane with Esc. Export to JSON, safely Save a captured session as a JSON file to share with your team, attach to a bug report or analyze later. Export everything or only the messages you currently see, choose whether to include message handlers and frame URLs, strip query strings from URLs, and mask tokens, passwords, API keys and JWTs before the file leaves your machine. Configurable capture limits Control max string length, array items, object keys, nesting depth, binary preview size and handler source length. 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 out which code on the page handles a message, or why nothing reacted to it • Cutting through DevTools, hot-reload and ad traffic to see only your app's messages • 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. How do I find the code that handles a message? Select the message and open the Handlers tab. It lists the listeners on the receiving window with the location where each was registered - click it to jump to Sources. 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. Does it change how my page behaves? No. postMessage is never patched. To list message handlers, the extension records calls to addEventListener("message") and window.onmessage, and always passes them on to the browser unchanged. How do I hide messages I don't care about? Right-click a message and choose Hide origin or Hide type. Common noise from browser extensions, dev servers and ad iframes is already hidden by the built-in rules. Manage all rules in Settings → Noise rules. Can I share captured messages with my team? Yes. Export the session to JSON and attach it to a ticket or bug report. Turn on Mask sensitive values in Settings → Export to keep tokens and passwords out of the file. WHAT'S NEW IN v0.6.0 • Noise rules: built-in rules hide common developer-tool, extension and ad messages; add your own rules by origin or payload field • Right-click a message to hide its origin or type as a noise rule • Hide noise toggle under the new More filters menu; the status bar shows how many messages are hidden • New Settings window with Limits, Noise rules and Export sections • Export options: all or only visible messages, optional handlers and frame URLs, strip URL query strings, mask tokens, passwords and API keys • Keyboard shortcuts: focus the filter, pause / resume, clear, close the details pane • Configurable handler source length for the Handlers tab • Clear button in the filter box • Direction chips wrap to their own row on narrow panels instead of overlapping the filter