Couverture Chrome Devtools : comment enregistrer ou capturer le code utilisé ?

Question

L'outil de couverture est efficace pour trouver le code utilisé et non utilisé. Cependant, il ne semble pas y avoir de moyen d'enregistrer ou d'exporter uniquement le code utilisé. Il serait même utile de cacher le code inutilisé.

J'essaie de réduire la quantité de CSS Bootstrap dans mon application ; le fichier compte plus de 7000 lignes. La seule façon d'obtenir uniquement le code utilisé est de parcourir soigneusement le fichier, de rechercher les sections vertes, puis de copier ce code dans un nouveau fichier. Cela prend beaucoup de temps et n'est pas fiable.

Existe-t-il un autre moyen ? Chrome 60 ne semble pas avoir ajouté cette fonctionnalité.

Answer 1

Vous pouvez le faire avec le marionnettiste

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

Answer 2

J'ai parlé avec l'ingénieur qui possède cette fonctionnalité. Dans Chrome 64, il n'y a toujours pas de moyen d'exporter les résultats d'une analyse de couverture.

Étoile numéro 717195 pour aider l'équipe à donner la priorité à cette demande de fonctionnalité.

Answer 3

1. Tout d'abord, vous devez télécharger et installer "Google Chrome Dev".
2. sur Google chrome Dev, allez dans Inspecter l'élément > Sources > Ctrl+shift+p
3. Entrez "couverture" et sélectionnez "Démarrer l'instrumentation de la couverture et recharger la page".
4. Utilisez ensuite l'icône d'exportation cela vous donnera un fichier json.

vous pouvez également visiter : Chrome DevTools : Exportez vos données brutes de couverture de code

Answer 4

Chrome canary 73 peut le faire. Vous aurez besoin de Windows ou de Mac OS. Il y a une fonction d'exportation (icône flèche vers le bas) à côté des boutons d'enregistrement et d'effacement. Vous obtiendrez un fichier json et vous pourrez l'utiliser pour supprimer par programmation les lignes inutilisées.

Answer 5

J'ai téléchargé la dernière version de Canary et le bouton d'exportation était présent.

J'ai ensuite utilisé ce script de PHP pour analyser le fichier json fichier retourné. (Où la clé '6' dans le tableau est la ressource à analyser). J'espère que cela aidera quelqu'un !

$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>';