javascript - HTML5 Javascript postMessage API用の優れたデバッガーはありますか？

Question

開発者がpostMessageを使用してウィンドウ間で送信されるメッセージを正しくデバッグできる優れたツールはありますか？

それともFirebugのプラグインですか？

Answer 1

Firebug (1.11 ベータ 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値が同じではないというセキュリティ エラーが発生したため、これら 2 つの実装の動作はわずかに異なる場合があります。

更新: postMessage イベントをタイムラインに表示する機能リクエストを Chrome チームに送信しました。また、ページの読み込み時に任意の JavaScript コードをページに挿入できるJScript Tricks という拡張機能を見つけました。次のコードを追加して、ページが読み込まれたときにイベントを監視できます。すぐに発生するイベントを見逃す可能性がありますが、かなりうまく機能します (たとえば、可能であればオンロードの前)。

(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

firebug機能要求が発行されました。