WHY CAN'T I get Chrome devtools frontend to display message in the console panel through Chrome Devtools Protocol?

wwereal — Mon, 24 Jun 2024 07:39:14 +0000

I cloned the Chrome devtools frontend source code and ran npx http-server .. Then I visited http://127.0.0.1:8080/front_end/devtools_app.html?ws=localhost:8899, which connects to my backend WebSocket server (localhost:8899). The server listens for messages from the frontend and responds using the Chrome DevTools Protocol. However, the console panel displays nothing. How can I activate the console so it displays messages?

This is my backend code:

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(),
          },
        })
      );
    }
  });
});

DEV Community: wwereal

WHY CAN'T I get Chrome devtools frontend to display message in the console panel through Chrome Devtools Protocol?