什么是HTML5 Javascript postMessage API的好调试器？

Question

有没有什么好的工具允许开发人员使用postMessage正确调试windows之间发送的消息？

或者也许是Firebug的插件？

Answer 1

Firebug (截至1.11 beta 1)支持此功能monitorEvents().你可以这样做:

$("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:谢谢你提到这个功能请求)

编辑: 也适用于Chrome,虽然当我尝试上面的代码我遇到了一个安全错误,document.domain值不一样,所以这两个实现的行为可能会略有不同.

更新:我已向Chrome小组提交了一项功能请求,要求postMessage事件显示在时间轴中.此外,我找到了一个名为JScript Tricks的扩展,它可以在加载时将任意JavaScript代码注入页面.您可以向其添加以下代码,以便在页面加载后监视事件.它工作得很好,虽然它可能会错过立即发生的事件(例如在onload之前,如果可能的话).

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