How to debug postMessages
Log messages between pages and iframes or pop-ups
monitorEvents(window, 'message') // or window.addEventListener('message', console.log)
From the MDN docs:
The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.
That's pretty cool, right?
Here is a demo of postMessage usage.
But how can we debug these messages?
Run the following in the Console tab:
// On Safari and Chromium-based browsers monitorEvents(window, 'message') // On Firefox window.addEventListener('message', console.log) // ^ It works in all the other browsers too
If you're testing in CodeSandbox, run the command in the Console of its detached window.
After the setup, when receiving messages, you should see something like this:
I hope you enjoyed this post and follow me on any platform for more.