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
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: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.
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 theconsole.log
method