Есть ли хороший инструмент там, который позволяет разработчикам правильно отлаживать сообщения, отправленные между окнами с postMessage?Любой хороший отладчик для HTML5 Javascript postMessage API?
Или, может быть, плагин для Firebug?
Есть ли хороший инструмент там, который позволяет разработчикам правильно отлаживать сообщения, отправленные между окнами с postMessage?Любой хороший отладчик для HTML5 Javascript postMessage API?
Или, может быть, плагин для Firebug?
Firebug (as of 1.11 beta 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: спасибо за упоминание, что feature request)
EDIT:Also works in Chrome, хотя, когда я попробовал код выше, я обнаружил ошибку безопасности, что document.domain
значения не были одинаковыми, поэтому поведение этих двух реализаций может несколько отличаться.
ОБНОВЛЕНИЕ: У меня есть submitted a feature request для команды Chrome, в которой сообщается, что события postMessage отображаются на временной шкале. Кроме того, я нашел extension called JScript Tricks, который может вводить произвольный код JavaScript на страницу при загрузке. Вы можете добавить к нему следующий код для отслеживания событий после загрузки страницы. Он работает очень хорошо, хотя он может пропустить события, которые происходят сразу (например, перед загрузкой, если это возможно).
(function($) {
var $window = $(window);
$window.add("iframe").on("message", function(e) {
console.log("Received messsage from " + e.originalEvent.origin + ", data = " + e.originalEvent.data);
});
})(jQuery);
Любое обновление об этом в 2016 году? Я не уверен, что firebug все еще существует –
Firebug определенно по-прежнему существует (https://addons.mozilla.org/en-US/firefox/addon/firebug/), но мне не приходилось долго отлаживать 'postMessage' , поэтому я не рассматривал этот ответ недавно. Если вы найдете что-то сломанное или получите лучшее решение, поделитесь им. – iX3
Был выпущен firebug feature-request.
Спасибо @ iX3 за подсказку: теперь поддерживается Firebug (начиная с 1.11 beta 1). –
Что нужно отлаживать? Пока код отправки и получения правилен, он работает. Если нет, то это то, что вам нужно отлаживать. –
Действительно. Я бы сказал, просто проверьте значение переменных, которые вы отправляете. Например, в связанном примере просмотрите значение 'myMessage.value' или' evt.data'. –
Ну, если честно, может быть приятно, если (например, Firebug может показать вам сообщения, отправленные на конкретный кадр, независимо от того, какой код обработчика существует, вроде как он показывает детали XMLHttpRequest. – Pointy