任何适合HTML5 Javascript postMessage API的调试器?

有没有什么好的工具,允许开发人员正确地调试窗口与 postMessage之间发送的消息?

或者也可以是Firebug的插件

解决方法

FireBug (as of 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:感谢提到feature request)

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

更新:我有submitted a feature request的Chrome小组要求postMessage事件出现在时间轴.此外,我发现一个extension called 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);

相关文章

HTML5不是新事物。自从最初发布(2008年1月)以来,我们一直在使用它的一些功能。后来,我再次仔细查看...
Pointer Events API 是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(...
CSS动画非常的有趣;这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果。其中代表...
clip-path介绍 clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象...
语法 必需。动画时长的百分比。 合法的值: 0-100% from(与 0% 相同) to(与 100% 相同) 定义和用法...
基本代码 html代码: 首先定义一些基本的样式和动画: background-size: auto 100%; 这段代码的意思是让...