Есть ли сервис по предварительному просмотру веб страниц?

Question

[ince]

Есть ли универсальный сервис по предварительному просмотру веб страниц?
Я сервису даю ссылку, а он мне возвращает html-код с предпросмотром или чем-то подобным?
Знаю есть такое для отдельных сайтов, но есть ли что-то универсальное?

Answer 1

[Saboteur]

chromium headless browser может вам зайти на страничку, и сгенерировать ее скриншот.

Comments

[ince]

автоматизированно он умеет?

[Saboteur]

он консольный, часто используется для автотестов.

[ince]

Saboteur, понял, не подскажешь как взять скрин, вот квикстартерный скрипт для ноды

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

CDP((client) => {
  // Extract used DevTools domains.
  const {Page, Runtime} = client;

  // Enable events on domains we are interested in.
  Promise.all([
    Page.enable()
  ]).then(() => {
    return Page.navigate({url: 'https://example.com'});
  });

  // Evaluate outerHTML after page has loaded.
  Page.loadEventFired(() => {
    Runtime.evaluate({expression: 'document.body.outerHTML'}).then((result) => {
      console.log(result.result.value);
      client.close();
    });
  });
}).on('error', (err) => {
  console.error('Cannot connect to browser:', err);
});

[Saboteur]

В консоли можно так - ставишь chrome и:

chrome --headless --screenshot=с:\2.png https://example.com
chrome --headless --disable-gpu --screenshot=low_resolution.png --window-size=1280,768 https://example.com

В ноде, можно посмотреть какие-то готовые библиотеки. В ноде не силен, но посмотри https://bitsofco.de/using-a-headless-browser-to-ca...

[ince]

Saboteur, спасибо, получилось с помощью puppeteer

[Александр Епихин]

Как-то писал функцию для создания скриншотов с помощью puppeteer.
Но не для всех сайтов корректно создается скриншот. На некоторых скриншотах едет верстка.

async function createScreenshot(screenShotName, siteUrl, date) {

  try {

    const dest = `screenshots/${date}`;

    if (!fs.existsSync(dest)) {
      fs.mkdirSync(dest, { recursive: true });
    }

    const blockedResources = [
      'googletagmanager.com',
      'callkeeper.ru',
      'mc.yandex.ru',
      'connect.facebook.net',
      'code.reffection.com',
      'calltouch.ru',
      'c.4clouds.org'
    ];

    const requestsBlocked = [];

    const browser = await puppeteer.launch({args: ['--no-sandbox']});
    const page = await browser.newPage();
    await page.setViewport({
      width: 1920,
      height: 1080,
      deviceScaleFactor: 1,
    });

    await page.setRequestInterception(true);

    page.on('request', interceptedRequest => {
      if (blockedResources.includes(new URL(interceptedRequest.url()).host)) {
        requestsBlocked.push(interceptedRequest.url());
        interceptedRequest.abort();
      } else {
        interceptedRequest.continue();
      }
    });

    await page.goto(siteUrl);
    await autoScroll(page);

    await page.screenshot({
      path: `${dest}/${screenShotName}.jpg`,
      fullPage: true
    });

    await browser.close();

  } catch (error) {
    console.log(error);
  }

}

[ince]

Saboteur, headless browser - что значит headless (безголовый)?
Это распространенный эпитет в индустрии? Что он значит?

[ince]

Александр Епихин, мощно, спасибо
я попробовал, у меня так сработало, но у тебя, как я вижу, и исключения всякие обработаны, гугл и яндекс заблочен

const puppeteer = require('puppeteer');

(async () => {

  // 1. Launch the browser
  const browser = await puppeteer.launch();

  // 2. Open a new page
  const page = await browser.newPage();

  // 3. Navigate to URL
  await page.goto('https://bitsofco.de');

	// 4. Take screenshot
  await page.screenshot({path: 'screenshot.png'});

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

[Saboteur]

ince, без GUI интерфейса. Запускается в командной строке, генерит графическое изображение не выдавая его на экран, а сразу его либо сохраняет в файл, либо можно его использовать типа
"зайти на сайт и кликнуть на такое - то поле в нем". То есть сохраняется работа с отрендеренной страничкой, но все управление в консоли, без вывода изображения куда-либо.