Извлечь все CSS с Кукольником?

Question

Я провожу анализ сложности сайта.Каков наилучший способ извлечь все CSS (внешние таблицы стилей, <style> теги и встроенный CSS) для всех узлов веб-страницы, используя Chrome / Puppeteer без головы?

В идеале, я бы сохранил синтаксискак написано автором страницы.Если это невозможно (например, для встроенного CSS), я бы хотел, чтобы все вычисляемые CSS были в формате, аналогичном вкладке «Стили» в инструментах разработчика Chrome.

Существует ли какой-либо автоматический способ сделать это?

В противном случае, могу ли я как-то получить доступ к внешним таблицам стилей страницы?Затем я могу объединить их с содержимым тегов <style> и вручную вытянуть встроенные стили.Это кажется возможным, но сложно, если предположить, что я каким-то образом получу эти внешние листы.

Мой запасной план - итерация всех узлов страницы с использованием CSS.getMatchedStylesForNode, но это выглядит грязно, грубо и медленно.

Бонусные баллы : компилировать CSS в каскад, удаляя лишние стили?

Спасибо.

Answer 1

Вы просите две разные вещи:

Утилизация

Для веб-утилизации в nodejs лучше использовать cheerio пакет.

Обнаружение сетевых запросов

Если вы хотите получить запрошенные css-файлы, вы можете сделать что-то вроде:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.on('response',async response => {
    if(response.request().resourceType() === 'stylesheet') {
      console.log(await response.text());
    }
  });
  await page.goto('https://myurl.com');
  await browser.close();
})();