Any good debugger for HTML5 Javascript postMessage API?

Question

Is there any good tool out there that allows developers to correctly debug messages sent between windows with postMessage?

Or maybe a plugin for Firebug?

Solution

Firebug (as of 1.11 beta 1) supports this with monitorEvents(). You can do something like this:

$("iframe").each(function(i, e) {
    console.log("Monitoring messages sent to: iframe(" + i + ")#" + $(this).attr("id"));
    monitorEvents(this.contentWindow, "message"); 
    
    // Send a test message to this iframe
    this.contentWindow.postMessage("Hi iframe - " + i, "*"); 
});

console.log("Monitoring messages sent to window");
monitorEvents(window, "message"); 
// Send a test message to the window
window.postMessage("Hi window", "*"); 

(@Pierre: thanks for mentioning that feature request)

EDIT: Also works in Chrome, though when I tried the above code I encountered a security error that the document.domain values were not the same, so the behavior of these two implementations may be slightly different.

UPDATE: I have submitted a feature request to the Chrome team asking that postMessage events appear in the timeline. Also, I found an extension called JScript Tricks that can inject arbitrary JavaScript code into a page when it is loaded. You can add the following code to it to monitor events once the page loads. It works pretty well, though it might miss events that occur immediately (e.g. before onload, if that's possible).

(function($) {
    var $window = $(window);
    $window.add("iframe").on("message", function(e) {
        console.log("Received messsage from " + e.originalEvent.origin + ", data = " + e.originalEvent.data);
    });
})(jQuery);

Comments

[Sean Kinsey]

What is there to debug? As long as the sending and receiving code is correct then it works. If not, then that's what you need to debug

[Marcel Korpel]

Indeed. I'd say, just check the value of the variables you're sending. E.g., in the linked example, look at the value of myMessage.value or evt.data.

[Pointy]

Well, to be fair it might be nice if (e.g.) Firebug could show you messages posted to a particular frame, regardless of what handler code exists, sort-of like how it shows XMLHttpRequest details.

[Pierre Duplouy]

What Pointy described is exactly what I meant: what Firebug does with XHR is pretty cool, and having the same thing for postMessage would be sweet.

[Marcel Korpel]

Agreed. Perhaps you can file a feature request? They have a Google discussion group (not to confuse with the Firebug-FDGirls group, which is a totally different one ;), I think that's the appropriate place.

[Pierre Duplouy]

Alright, thanks for your help! groups.google.com/group/firebug/browse_thread/thread/…

[Pierre Duplouy]

Thanks @iX3 for the tip: now supported by Firebug (as of 1.11 beta 1).

[Augustin Riedinger]

Any update on this in 2016? I'm not sure firebug still exists

[jacobq]

Firebug definitely still exists (addons.mozilla.org/en-US/firefox/addon/firebug) but I haven't had to debug postMessage in a long time, so I have not reviewed this answer recently. If you find something broken or have a better solution please share.

[jacobq]

FWIW, Chrome DevTools documents monitorEvents here

[amoebe]

Here's a vanilla JS version since I suspect some people might not use jQuery anymore: monitorEvents(window, "message"); Array.from(document.getElementsByTagName('iframe')).forEach(‌​iframe => monitorEvents(iframe.contentWindow, "message"))

[Sarath]

On chrome dev tools => developers.google.com/web/updates/2015/05/…