How to get console.log output in terminal via headless Chrome Runtime.evaluate

Question

I follow this topic here:

https://github.com/cyrus-and/chrome-remote-interface/issues/105

But I can not get the output console.login the Mac terminal. This is probably a Chrome Devtools window that I don't see.

So, how do I get console.log output on a Mac Terminal through a Runtime.evaluate expression?

My code is below:

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
const file = require('fs');

(async function() {
  async function launchChrome() {
    return await chromeLauncher.launch({
      chromeFlags: [
        '--headless',
        '--disable-gpu'
      ]
    });
  }
  const chrome = await launchChrome();
  const protocol = await CDP({
    port: chrome.port
  });

  const {
    DOM,
    Network,
    Page,
    Emulation,
    Runtime
  } = protocol;

  await Promise.all([Network.enable(), Page.enable(), Runtime.enable(), DOM.enable()]);

  Page.navigate({url: 'https://www.chromestatus.com/'});

  Page.loadEventFired(async () => {
    const result = await Runtime.evaluate({expression: 'console.log(\'aaa\')'});

    protocol.close();
    chrome.kill(); 
  });

})();

Answer 1

I did some research on this; Below are some of my findings:

When evaluating:

const result = await Runtime.evaluate({ expression: 'console.log("aaa")' });

The result is always:

{result: {type: 'undefined'}}

However, the following expression:

const result = await Runtime.evaluate({expression: 'window.location.toString()'});

Return:

{result: {type: 'string',      value: ' https://www.chromestatus.com/features'}}

, , :

const result = await Runtime.evaluate({ expression: 'console.log' });

:

{result: {type: 'function',      className: "",      description: 'function log() {[native code]}',      objectId: '{ "injectedScriptId": 2, "id": 1}'}}

, , console.log messageAdded .

, Console messageAdded, , .

, :

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
const file = require('fs');

(async function() {
  async function launchChrome() {
    return await chromeLauncher.launch({
      chromeFlags: [
        '--headless',
        '--disable-gpu'
      ]
    });
  }
  const chrome = await launchChrome();
  const protocol = await CDP({
    port: chrome.port
  });

  const {
    DOM,
    Network,
    Page,
    Emulation,
    Runtime,
    Console
  } = protocol;

  await Promise.all([Network.enable(), Page.enable(), DOM.enable(), Runtime.enable(), Console.enable()]);

  await Page.navigate({url: 'https://www.chromestatus.com/'});

  // REMARKS: messageAdded is fired every time a new console message is added
  Console.messageAdded((result) => {
    console.log(result);
  });

  Page.loadEventFired(async () => {
    const result = await Runtime.evaluate({ expression: 'console.log("aaa")' });

    // REMARKS: When evaluating console.log, result.result.value is undefined.
    console.log(result);

    protocol.close();
    chrome.kill(); 
  });

})();

/* Output from listening on messageAdded:
{ message: 
   { source: 'console-api',
     level: 'log',
     text: 'aaa',
     url: '',
     line: 1,
     column: 9 } }
*/

Chrome ViewTools Viewer -

:

Console.messageAdded

.

, !

Answer 2

, , puppeteer. API , - . , - javascript .

, API .

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/');

  let result = await page.evaluate(async () => {
    // here comes the code which gets executed in browser
    return await fetch('index.html').then(response => response.text());
  });

  console.log(result);

  await browser.close();
})();