无法通过Chrome DevTools Protocol让调试前端控制台显示消息

• 先正确响应Runtime.enable命令
  DevTools发送的每个命令都需要带对应id的响应，否则前端会判定命令未完成，后续事件无法正常处理。你的代码只发送了控制台事件，没有回复Runtime.enable的确认响应，这是核心问题。

修改代码，收到Runtime.enable时先返回成功响应：

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') {
      // 先回复命令成功，id必须和前端发送的一致
      ws.send(JSON.stringify({
        id: message.id,
        result: {}
      }));
      // 再发送控制台消息事件
      ws.send(
        JSON.stringify({
          method: 'Runtime.consoleAPICalled',
          params: {
            args: [
              {
                type: 'string',
                value: 'MESSAGE THAT I WANT TO SHOW IN THE CONSOLE PANEL'
              }
            ],
            executionContextId: 1, // 先用默认上下文ID测试
            timestamp: new Date().getTime(),
            type: 'log' // 必须指定消息类型，如log/error/warn
          },
        })
      );
    }
  });
});

• 补充控制台事件的必填字段
  Runtime.consoleAPICalled事件必须包含type字段，DevTools依赖它识别消息类型，没有该字段会导致消息不渲染。

• 确保执行上下文ID有效
  固定的27可能不是前端当前存在的上下文ID，先用1（默认执行上下文）测试，后续再根据实际场景维护上下文ID的生成与同步。

• 验证WebSocket连接状态
  检查DevTools的Network面板，确认WebSocket连接处于OPEN状态，且没有报错信息。

内容的提问来源于stack exchange，提问作者linjunchao