How do I inspect a BroadcastChannel with Chrome DevTools?

Question

有没有办法使用 Chrome DevTools 来查看BroadcastChannel发生的事情，而不是将message事件侦听器附加到它，以便我可以看到谁在postMessage -ing 什么？

Answer 1

The best solution I found was extending the prototype of postMessage like this:

(function(postMessage) {
  BroadcastChannel.prototype.postMessage = function (message) {
    debugger;

    postMessage.call(this, message);
  };
}(BroadcastChannel.prototype.postMessage));

You can obviously replace the debugger statement by something else like console.trace(message) for example, than you get the callstack directly printed in the console.

I hopes this helps you.