如何防止 Chrome 无头加载图像答案

【问题标题】：how to prevent Chrome headless from loading images如何防止 Chrome 无头加载图像
【发布时间】：2018-07-24 04:34:26
【问题描述】：

我正在使用 headless chrome 进行测试，其中一部分我想阻止浏览器加载页面上的图像，页面必须是数据 url 而不是普通页面。
我正在使用 headless chrome 和下一个启动命令：
chrome --headless --remote-debugging-port=9222

我创建了下一个测试来展示我想要实现的目标。但没有任何效果......

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

CDP(async(client) => {
  const {
    Page,
    Network
  } = client;
  try {
    await Page.enable();
    await Network.enable();
    await Network.emulateNetworkConditions({
      offline: true,
      latency: 0,
      downloadThroughput: 0,
      uploadThroughput: 0
    });
    await Page.navigate({
      url: "data:text/html,<h1>The next image should not be loaded</h1><img src='http://via.placeholder.com/350x150'>"
    });
    await Page.loadEventFired();
    const {
      data
    } = await Page.captureScreenshot();
    fs.writeFileSync((+new Date()) + '.png', Buffer.from(data, 'base64'));
  } catch (err) {
    console.error(err);
  } finally {
    await client.close();
  }
}).on('error', (err) => {
  console.error(err);
});

【问题讨论】：

标签： google-chrome-devtools google-chrome-headless

【解决方案1】：

如果你使用的是 Puppeteer，你可以使用下面的代码：

await page.setRequestInterception(true);
page.on('request', (request) => {
    if (request.resourceType() === 'image') request.abort();
    else request.continue();
});

发件人：https://github.com/puppeteer/puppeteer/blob/main/examples/block-images.js

【讨论】：

【解决方案2】：

使用 puppeteer，您可以使用 args 选项来传递 blink-settings 参数

const browser = await puppeteer.launch({
    args: [
      '--blink-settings=imagesEnabled=false'
    ]
});

【讨论】：

【解决方案3】：

您可以使用此标志阻止图像。
它适用于金丝雀和稳定版。

chrome --headless --remote-debugging-port=9222 --blink-settings=imagesEnabled=false

【讨论】：

奇怪的事情 - 在某些网站浏览器上使用它选项无法获取 css 文件