google chrome devtools - quitar - Cobertura de Devtools de Chrome: ¿cómo guardar o capturar el código utilizado?

developer tools chrome quitar

Question

La herramienta de cobertura es buena para encontrar códigos usados ​​y no utilizados. Sin embargo, no parece haber una forma de guardar o exportar solo el código utilizado. Incluso ocultar código no utilizado sería útil.

Estoy intentando reducir la cantidad de CSS Bootstrap en mi aplicación; El archivo tiene más de 7000 líneas. La única forma de obtener solo el código usado es desplazarse con cuidado por el archivo, buscar secciones verdes y luego copiar ese código en un nuevo archivo. Es lento y poco fiable.

¿Hay alguna forma diferente? Chrome 60 no parece haber agregado esta funcionalidad.

Answer 1

Hablé con el ingeniero que posee esta característica. A partir de Chrome 64 todavía no hay manera de exportar los resultados de un análisis de cobertura.

Emita el número 717195 para ayudar al equipo a priorizar esta solicitud de función.

Answer 2

Puedes hacerlo con titiritero.

(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();
})();