は、どのように私はここに、この問題の記事を以下の午前ヘッドレスクロームRuntime.evaluate

Question

を介して、端末ではconsole.log出力を取得するには：

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

しかし、私は、Macのターミナルでconsole.log出力を得るように見えることはできません。おそらくChrome Devtoolsウィンドウの中には表示されません。

Mac端末でconsole.logの出力をRuntime.evaluate式で取得するにはどうすればよいですか？

以下

私のコード：

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

私はこの上でいくつかの研究を行ってきました。

評価する場合：

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

結果は常にある：

{結果：{タイプ： '未定義'}}

、しかし下記の私の調査結果のいくつかはあります以下の式：

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

戻り値：

{結果：{タイプ： 'string' は、 値： 'https://www.chromestatus.com/features'}}

今、私はそれを起動することなく、機能を評価する場合：

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

結果は次のように設定されます。

{結果： {type： 'function'、 className： 'Function'、 説明： 'function log（）{[ネイティブコード]}'、 objectId： '{"injectScriptId"：2、 "id"：1}'}}

だから私はいくつかのより多くの掘削をした、と評価されたときに毎回console.logが呼び出されることがわかった、はコンソールオブジェクトが常に発射される上イベントをmessageAdded。

コンソールオブジェクトを有効にして、リスナーを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 DevTools Protocol 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(); 
})();