skip to Main Content

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

2

Answers


  1. The WebSocket endpoint at chrome wouldn’t run directly under the path host:port/, but is defined per https://chromedevtools.github.io/devtools-protocol/

    The devtools frontent likely gets /json/version which returns smth like:

    {
        "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"
    }
    

    and then attempts to connect to ws://localhost:9222/devtools/browser/b0b8a4fb-bb17-4359-9533-a8d9f3908bd8, which for your testing code isn’t handled at all (neither the /json/version endpoint)

    You might want to either refactor your code, or just test it directly on chrome.

    Login or Signup to reply.
  2. You are using the event Runtime.consoleAPICalled as a method which is not corrct. You should be listening to your event and if any javascript logs a message, you will get notification back.

    To achieve what you want to do, log a message, take a look a [Runtime.evaluate][1] method and call the console.log method

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search