javascript - HTML5 Javascript postMessage API 有什么好的调试器吗？

Question

有没有什么好的工具可以让开发人员正确调试使用postMessage在窗口之间发送的消息？

或者可能是 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 代码注入页面。您可以将以下代码添加到它以在页面加载后监视事件。它工作得很好，尽管它可能会错过立即发生的事件（例如，在加载之前，如果可能的话）。

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

Answer 2

已发出萤火虫功能请求。