Chrome 开发者工具控制台中的 BroadcastChannel 测试不起作用

Question

我正在测试BroadcastChannel功能，但遇到了麻烦。我打开两个 Chrome 窗口以及每个窗口的开发工具。我在控制台上写：

const z = new BroadcastChannel('blarg')
z.onmessage = function (ev) {console.log(ev)}

我可以检查 z ，它已将函数保存到 onmessage 属性中，因此一切看起来都不错。然而，当我测试时：

z.postMessage('sweet')

在其中一个控制台中，另一个控制台中没有任何显示。我希望由于两个 Chrome 窗口都订阅了广播频道blarg，并且具有控制台记录发布消息的功能，因此我会看到该消息sweet显示在另一个控制台中，但没有任何反应。

那么两个问题：

我不能BroadcastChannel像这样在开发工具控制台中测试界面吗？

如果是这样，我对 BroadcastChannel 的工作原理缺少什么？

Answer 1

如果满足以下条件，它就会起作用：

当你说

我打开两个 Chrome 窗口以及每个窗口的开发工具。

打电话给他们A和B。在术语中A，和B被定义为“浏览上下文”，它们也可以是选项卡、框架或 iframe。

以下代码是满足条件 1. 和 2 的示例。

开发工具A：

location.href = 'https://example.com'
z = new BroadcastChannel('blarg')
z.onmessage = (ev) => { console.log(ev) }

开发工具B：

location.href = 'https://example.com'
z = new BroadcastChannel('blarg')
z.onmessage = (ev) => { console.log(ev) }

当浏览器上下文（窗口、选项卡、框架或 iframe）不“指向”任何常规 URL（例如，当您按 CTRL+T 打开新选项卡时）时，也满足条件 1。在这种情况下，原点具有特殊值chrome://new-tab-page。

表示，如果您从发帖A至B，B将会收到该消息console.log。反之亦然。