无法让 Chrome 开发者工具前端通过 Chrome 开发者工具协议在控制台面板中显示消息

Question

我克隆了 Chrome devtools 前端源代码并运行了

npx http-server .

。然后我访问了

http://127.0.0.1:8080/front_end/devtools_app.html?ws=localhost:8899

，它连接到我的后端 WebSocket 服务器 (

localhost:8899

)。服务器侦听来自前端的消息并使用 Chrome DevTools Protocol 进行响应。但是，控制台面板没有显示任何内容。如何激活控制台以显示消息？

这是我的后端代码：

const { WebSocketServer } = require('ws');
const wss = new WebSocketServer({ port: 8899 });
wss.on('connection', function connection(ws) {
  ws.on('message', function message(data) {
    console.log('received: %s', data);
    const message = JSON.parse(data);
    if (message.method === 'Runtime.enable') {
      ws.send(
        JSON.stringify({
          method: 'Runtime.consoleAPICalled',
          params: {
           args: [
            {
              type: 'string',
              value: 'MESSAGE THAT I WANT TO SHOW IN THE CONSOLE PANEL'
            }
           ],
           executionContextId: 27,
           timestamp: new Date().getTime(),
          },
        })
      );
    }
  });
});

Answer 1

chrome 上的 WebSocket 端点不会直接在路径

host:port/

下运行，而是根据 https://chromedevtools.github.io/devtools-protocol/

定义

开发工具前端可能会得到

/json/version

，它返回类似：

{
    "Browser": "Chrome/72.0.3601.0",
    "Protocol-Version": "1.3",
    "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3601.0 Safari/537.36",
    "V8-Version": "7.2.233",
    "WebKit-Version": "537.36 (@cfede9db1d154de0468cb0538479f34c0755a0f4)",
    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/b0b8a4fb-bb17-4359-9533-a8d9f3908bd8"
}

然后尝试连接到

ws://localhost:9222/devtools/browser/b0b8a4fb-bb17-4359-9533-a8d9f3908bd8

，对于您的测试代码来说根本没有处理它（

/json/version

端点都没有）

您可能想要重构代码，或者直接在 chrome 上测试它。