任何适合HTML5 Javascript postMessage API的调试器？ [英] Any good debugger for HTML5 Javascript postMessage API?

问题描述

有没有任何好的工具，允许开发人员正确调试在Windows之间发送的消息与 postMessage ？

或者也可以是Firebug的插件？

解决方案

Firebug （1.11 beta 1）支持这个与 monitorEvents（）。您可以这样做：

  $（iframe）。each（function（i，e）{
 console.log（监视邮件发送到：iframe（+ i +）＃+ $（this）.attr（id））; 
 monitorEvents（this.contentWindow，message）; 
 
 //发送一个测试消息给这个iframe 
 this.contentWindow.postMessage（你好iframe  - + i，*）; 
}）; 
 
 console.log（监控发送到窗口的消息）; 
 monitorEvents（window，message）; 
 //向窗口发送测试消息
 window.postMessage（Hi window，*）; 
  

（@ Pierre：感谢提到功能请求）

编辑： strong> 在Chrome中也可以使用，但是当我尝试上述代码时遇到安全错误 document.domain 值不一样，所以这两个实现的行为可能略有不同。

更新：我有提交的功能请求 Chrome团队要求postMessage事件显示在时间轴中。此外，我发现一个扩展名为JScript Tricks ，可以插入任意JavaScript代码加载时进入页面。您可以添加以下代码以在页面加载后监视事件。它的工作原理很好，尽管它可能会错过立即发生的事件（例如在上载之前，如果可能的话）。

 （function $（$）$ {
 var $ window = $（window）; 
 $ window.add（iframe）on（message，function（e）{
 console.log从+ e.originalEvent.origin +收到的消息，data =+ e.originalEvent.data）; 
}）; 
}）（jQuery）; 
  

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?

解决方案

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);

这篇关于任何适合HTML5 Javascript postMessage API的调试器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！