我在这里发布这个问题:
https://github.com/cyrus-and/chrome-remote-interface/issues/105
但我似乎无法在Mac终端中获得console.log
输出。它可能在Chrome Devtools窗口内,我看不到。
那么如何通过Runtime.evaluate表达式在Mac Terminal中获取console.log输出?
我的代码如下:
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();
});
})();
答案 0 :(得分:3)
我一直在研究这个问题;以下是我的一些发现:
评估时:
const result = await Runtime.evaluate({ expression: 'console.log("aaa")' });
结果总是:
{result:{type:'undefined'}}
但是,以下表达式:
const result = await Runtime.evaluate({expression: 'window.location.toString()'});
返回:
{result:{type:'string', 价值:'https://www.chromestatus.com/features'}}
现在,如果我在不调用它的情况下评估函数:
const result = await Runtime.evaluate({ expression: 'console.log' });
结果设置为:
{result:{type:'function', className:'Function', 描述:'function log(){[native code]}', objectId:'{“injectScriptId”: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 DevTools Protocol Viewer - Console
获得了详细信息来自文档:
Console.messageAdded
添加新控制台消息时发出。
希望这有帮助!
答案 1 :(得分:1)
对于那些想要从页面获取数据的简单方法的人,我建议puppeteer。它具有比 chrome-remote-interface 更清晰的高级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();
})();