Alle guten debugger für HTML5-Javascript-postMessage-API?

Gibt es irgendein gutes tool gibt, die es Entwicklern ermöglicht, richtig zu debug-Nachrichten zwischen windows mit postMessage?

Oder vielleicht ein plugin für Firebug?

  • Was gibt es zu Debuggen? So lange, wie das senden und empfangen von code korrekt ist, dann funktioniert es. Wenn nicht, dann ist das, was Sie brauchen, um zu Debuggen
  • In der Tat. Ich würde sagen, einfach mal den Wert der Variablen, an die Sie versenden. E. g., in dem verlinkten Beispiel, betrachten Sie den Wert der myMessage.value oder evt.data.
  • Gut, um fair zu sein, es wäre schön, wenn (z.B.) Firebug könnte zeigen Sie Nachrichten zu einem bestimmten Bild, egal, was hf-code vorhanden ist, Sortieren-wie Sie es zeigt XMLHttpRequest-details.
  • Was Spitzen beschrieben ist genau das, was ich meinte: was Firebug funktioniert mit XHR ist ziemlich cool, und dass das gleiche für postMessage würde süß sein.
  • Vereinbart. Vielleicht können Sie Datei eine feature-Anfrage? Sie haben eine Google-Diskussionsgruppe (nicht zu verwechseln mit der Firebug-FDGirls Gruppe, die ein völlig anderes 😉 ich denke, das ist der geeignete Ort.
  • Okay, vielen Dank für Ihre Hilfe! groups.google.com/group/firebug/browse_thread/thread/...

InformationsquelleAutor Pierre Duplouy | 2010-06-16
  1. 20

    Firebug (ab 1.11 beta 1) unterstützt diese mit monitorEvents(). Können Sie etwas wie das hier tun:

    $("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: vielen Dank für die Erwähnung, dass feature request)

    EDIT: Funktioniert auch im Chrome, obwohl, wenn ich habe versucht den obigen code, stieß ich auf eine security-Fehlermeldung, dass das document.domain Werte waren nicht die gleichen, so daß das Verhalten dieser beiden Implementierungen möglicherweise etwas anders.

    UPDATE: ich habe ein feature-request eingereicht Sie auf das Chrome-team Fragen, dass die postMessage-Ereignisse werden in der Zeitleiste angezeigt. Auch fand ich eine Erweiterung namens JScript Tricks injiziert werden können, beliebigen JavaScript-code in eine Seite, wenn es geladen wird. Sie können fügen Sie den folgenden code, um es zu überwachen Ereignisse, sobald die Seite geladen wird. Es funktioniert ziemlich gut, obwohl es vielleicht vermissen, Ereignisse, die sofort auftreten (z.B. vor dem onload, falls das möglich ist).

    (function($) {
    var $window = $(window);
    $window.add("iframe").on("message", function(e) {
        console.log("Received messsage from " + e.originalEvent.origin + ", data = " + e.originalEvent.data);
    });
})(jQuery);
    • Ein update auf das im Jahr 2016? Ich bin mir nicht sicher, firebug noch existiert
    • Firebug definitiv noch vorhanden (addons.mozilla.org/en-US/firefox/addon/firebug), aber ich habe nicht zu Debuggen postMessage in eine lange Zeit, so habe ich nicht überprüft, dass diese Antwort vor kurzem. Wenn Sie feststellen, dass etwas gebrochen oder haben eine bessere Lösung bitte teilen.
    • FWIW, Chrome DevTools Dokumente monitorEvents hier
    • Hier ist ein vanilla JS version, da ich vermute, dass einige Leute möglicherweise nicht die Verwendung von jQuery nicht mehr: monitorEvents(window, "message"); Array.from(document.getElementsByTagName('iframe')).forEach(iframe => monitorEvents(iframe.contentWindow, "message"))
    InformationsquelleAutor iX3
  2. -1

    Einem firebug feature-request ausgestellt wurde.

    • Danke @iX3 für den Tipp: jetzt unterstützt von Firebug (ab 1.11 beta 1).
    InformationsquelleAutor Pierre Duplouy
Schreibe einen Kommentar