Cualquier buen depurador para HTML5 Javascript postMessage API?

Question

¿Hay alguna buena herramienta que permita a los desarrolladores depurar correctamente los mensajes enviados entre ventanas con postMessage?

O tal vez un plugin para Firebug?

Answer 1

Firebug (as of 1.11 beta 1) admite esto con monitorEvents(). Se puede hacer algo como esto:

$("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: gracias por mencionar que feature request)

EDIT:Also works in Chrome, aunque cuando probé el código anterior me encontré con un error de seguridad que los valores document.domain no eran lo mismo, por lo que el comportamiento de estas dos implementaciones puede ser ligeramente diferente.

ACTUALIZACIÓN: Tengo submitted a feature request al equipo de Chrome pidiendo que los eventos postMessage aparezcan en la línea de tiempo. Además, encontré un extension called JScript Tricks que puede inyectar código JavaScript arbitrario en una página cuando se carga. Puede agregar el siguiente código para monitorear eventos una vez que la página se carga. Funciona bastante bien, aunque puede perder eventos que ocurren inmediatamente (por ejemplo, antes de la carga, si eso es posible).

(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

Se ha emitido un firebug feature-request.