How do I inspect a BroadcastChannel with Chrome DevTools?

Question

Is there a way, with Chrome DevTools, to see what’s going on in a BroadcastChannel other than attaching a message event listener to it, so that I could see who’s postMessage-ing what?

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.