sure - ¿Algún buen depurador para HTML5 Javascript postMessage API?

postmessage receivemessage

Question

¿Existe 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 (a partir de 1.11 beta 1) admite esto con monitorEvents() . Puedes 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 esa solicitud de característica )

EDITAR: También funciona en Chrome , aunque cuando probé el código anterior encontré un error de seguridad en el sentido de que los valores del dominio de document.domain no eran iguales, por lo que el comportamiento de estas dos implementaciones puede ser ligeramente diferente.

ACTUALIZACIÓN: he enviado una solicitud de función al equipo de Chrome solicitando que aparezcan los eventos postMessage en la línea de tiempo. Además, encontré una extensión llamada Trucos de JScript que puede inyectar código JavaScript arbitrario en una página cuando se carga. Puede agregarle el siguiente código para monitorear eventos una vez que se carga la página. Funciona bastante bien, aunque podría pasar por alto eventos que ocurren inmediatamente (por ejemplo, antes de la carga, si 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 una solicitud de feature-request firebug.