Chrome Devtools Coverage: как сохранить или захватить код, используемый кодом?

Ответ 1

Вы можете сделать это с кукловодом

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage()

  //Start sending raw DevTools Protocol commands are sent using 'client.send()'
  //First off enable the necessary "Domains" for the DevTools commands we care about
  const client = await page.target().createCDPSession()
  await client.send('Page.enable')
  await client.send('DOM.enable')
  await client.send('CSS.enable')

  const inlineStylesheetIndex = new Set();
  client.on('CSS.styleSheetAdded', stylesheet => {
    const { header } = stylesheet
    if (header.isInline || header.sourceURL === '' || header.sourceURL.startsWith('blob:')) {
      inlineStylesheetIndex.add(header.styleSheetId);
    }
  });

  //Start tracking CSS coverage
  await client.send('CSS.startRuleUsageTracking')

  await page.goto('http://localhost')
  // const content = await page.content();
  // console.log(content);

  const rules = await client.send('CSS.takeCoverageDelta')
  const usedRules = rules.coverage.filter(rule => {
    return rule.used
  })

  const slices = [];
  for (const usedRule of usedRules) {
    // console.log(usedRule.styleSheetId)
    if (inlineStylesheetIndex.has(usedRule.styleSheetId)) {
      continue;
    }

    const stylesheet = await client.send('CSS.getStyleSheetText', {
      styleSheetId: usedRule.styleSheetId
    });

    slices.push(stylesheet.text.slice(usedRule.startOffset, usedRule.endOffset));
  }

  console.log(slices.join(''));

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

Ответ 2

Я разговаривал с инженером, который владеет этой функцией. Начиная с Chrome 64, пока нет возможности экспортировать результаты анализа покрытия.

Звездный выпуск # 717195, чтобы помочь команде расставить приоритеты для этого запроса.

Ответ 3

1. Прежде всего вам необходимо скачать и установить "Google Chrome Dev".
2. в Google Chrome Dev перейдите к элементу Inspect> Источники> Ctrl + shift + p.
3. Введите "покрытие" и выберите "Запустить приборное покрытие и перезагрузить страницу"
4. Затем используйте иконку экспорта , и вы получите файл json.

Вы также можете посетить: Chrome DevTools: экспорт необработанных данных покрытия кода

Ответ 4

Chrome canary 73 может это сделать. Вам понадобится Windows или Mac OS. Существует функция экспорта (значок стрелки вниз) рядом с кнопкой записи и очистки. Вы получите файл json, а затем сможете использовать его для программного удаления неиспользуемых строк.

Ответ 5

Я скачал последнюю версию канарейки и кнопка экспорта присутствовала.

Затем я использовал этот PHP-скрипт для анализа возвращенного файла json. (Где ключ '6' в массиве является ресурсом для анализа). Надеюсь, это кому-нибудь поможет!

$a = json_decode(file_get_contents('coverage3.json'));
$sText = $a[6]->text;
$sOut = "";
foreach ($a[6]->ranges as $iPos => $oR) {
    $sOut .= substr($sText, $oR->start, ($oR->end-$oR->start))." \n";
}
echo '<style rel="stylesheet" type="text/css">' . $sOut . '</style>';

Ответ 6

Вы можете сделать это с помощью Headless Chrome и кукловода:

1. В новой папке установите puppeteer, используя npm (это будет включать в себя Headless Chrome для вас):

npm я puppeteer --save

2. Поместите следующее в файл csscoverage.js и измените localhost, чтобы он указывал на ваш сайт.

:

const puppeteer = require('puppeteer');
const util = require('util');
const fs    = require("fs");

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.coverage.startCSSCoverage();
 await page.goto('https://localhost'); // Change this
 const css_coverage = await page.coverage.stopCSSCoverage();
 console.log(util.inspect(css_coverage, { showHidden: false, depth: null }));
 await browser.close();

let final_css_bytes = '';
let total_bytes = 0;
let used_bytes = 0;

for (const entry of css_coverage) {
  final_css_bytes = "";

  total_bytes += entry.text.length;
  for (const range of entry.ranges) {
    used_bytes += range.end - range.start - 1;
    final_css_bytes += entry.text.slice(range.start, range.end) + '\n';
  }

  filename = entry.url.split('/').pop();

  fs.writeFile('./'+filename, final_css_bytes, error => {
    if (error) {
      console.log('Error creating file:', error);
    } else {
      console.log('File saved');
    }
  });
}
})();

3. Запустите его с помощью node csscoverage.js

Это выведет весь CSS-код, который вы используете, в отдельные файлы, в которых они появляются (не давая вам сливаться с внешними библиотеками в ваш собственный код, как это делает другой ответ).