PostMessage Inspector

1 / 5

See every postMessage on the page — messages stream into DevTools live, each with a collapsible JSON view.

Every message event received by the page and its frames — captured the moment it arrives.

I built it at work: an online casino embeds game and sportsbook providers as iframes, and they talk to the host app only through postMessage. DevTools has a Network panel for requests but nothing for messages, so debugging meant sprinkling console.log over listeners. This is that missing panel.

Features#

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 for Chrome or Firefox
2. Open 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.