VCMonitor 开发笔记

前言

笔记

• [1] 除了对整个页面进行截取，Chrome 还支持对页面某个元素进行截取。通过 elementHandle.screenshot() 可针对具体元素进行截取。

const element = await page.$("body");
await element.screenshot({
  path: "screenshot.png"
});

这就很实用了，能够满足大部分自定义的需求。大多数情况下，我们只对 body 部分感兴趣，通过只对 body 进行截取，就不用指定长宽而且自动排除掉 body 外多余的留白等。其参数与 page.screenshot() 一样。需要注意的是，虽说一样，但其中是不能使用 fullPage 参数的。因为针对元素进行图片截取已经表明是局部截图了，与 fullPage 截取整个页面是冲突的，但它还是会自动滚动以截取完整的这个元素， fullPage 的优点没有丢掉。

• [3] 本文的 pageScraper.js 代码似乎有点问题。具体来说，这个函数

let pagePromise = (link) => new Promise(async(resolve, reject) => {
	...
	resolve(dataObj);
	await newPage.close();
});

在本地测试一切正常。在 Docker 中运行，当第二遍执行任务时几乎都会报错：

/app/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:104
                error: new Errors_js_1.ProtocolError(),
                       ^

ProtocolError: Protocol error (Target.closeTarget): Target closed.
    at /app/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:104:24
    at new Promise (<anonymous>)
    at Connection.send (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:100:16)
    at Page.close (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/Page.js:2088:30)
    at /app/pageScraper.js:21:16
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  originalMessage: ''
}

将 resolve 与 await 调换顺序后不再出现错误。

参考资料

1. Puppeteer 截图及相关问题 - 博客园

2. jsdiff+diff2html - CodeSandbox

3. How To Scrape a Website Using Node.js and Puppeteer | DigitalOcean

4. Log4js logging with global logger helper - Log4js in NodeJS - Youtube

5. Running Puppeteer in Docker Troubleshooting | Puppeteer