4
votes

Comment extraire les données de "couverture" des outils de développement Chrome

J'utilise l'onglet Couverture de mes outils de développement Chrome et j'ai un très gros fichier et après avoir beaucoup joué avec Coverage, il est assez clair que seulement 15% de mon code CSS est utilisé (j'ai simulé des pressions sur menus ...).

Le problème est d'obtenir le chapeau de 15% du code de l'onglet Couverture. Je ne peux pas croire que les développeurs derrière cette fonctionnalité vraiment intéressante ne pensaient pas qu'un moyen facile pour l'utilisateur final de copier uniquement la partie verte du code. Vérifiez l'image ci-jointe.

Avez-vous une idée de comment je pourrais faire cela? J'ai lu quelque chose sur l'utilisation des marionnettistes, mais cela demande beaucoup de préparation. Sur la dernière version de Canary, il semble que je puisse exporter un JSON, mais il faudrait un certain temps pour coder un analyseur dans ce JSON afin d'extraire uniquement la partie nécessaire.

google-chrome

0 commentaires

3 Réponses :

0
votes

Ouvrez l'onglet Chrome -> Inspecter l'élément (F12) -> Appuyez sur le bouton Échap

0 commentaires

0
votes

Je suis en train de créer un script PHP qui analyse le fichier exporté Coverage JSON et génère uniquement le CSS / JS utilisé extrait. Malheureusement, je suis tombé sur un hic, à un moment donné, l'analyseur JSON perd le bon numéro de caractère et je me retrouve avec une syntaxe CSS / JS cassée ou incorrecte. Il n'est décalé que de quelques caractères, mais le nombre de caractères par lequel il est décalé est variable, il est donc presque impossible de le prédire lors de l'analyse.

Je ne suis pas sûr, mais je pense que le problème résulte de l'exécution de PHP sur le serveur, et le serveur peut lire les caractères du fichier CSS d'origine différemment d'un navigateur. Je vais essayer d'écrire un analyseur JSON de couverture en JavaScript. Quand je le ferai, je serai sûr de publier le code ici pour que tous puissent l'utiliser.

Désolé, je ne pourrais pas vous aider davantage, je voulais juste avertir les gens d'utiliser PHP pour faire cela car il semble ne pas lire correctement les numéros de caractères dans les gros fichiers CSS.

0 commentaires

3
votes

Merci à un article de Phillip Kriegel ( https: // www .philkrie.me / 2018/07/04 / extracting-coverage.html ) J'ai réussi à configurer Puppeteer pour extraire le CSS de couverture d'une URL et exporter ce CSS dans un fichier.

Voici comment le faire. :

Étape 1: Installez node.js globalement

Étape 2: Créez un dossier sur votre bureau

Étape 3: Dans le dossier, installez Node Package Manager (NPM) et le module de nœud Puppeteer

Étape 4: Créez un fichier JavaScript dans le dossier, nommez-le coverage.js

Étape 5: Mettez ce code dans ce fichier js:

const puppeteer = require('puppeteer');
// Include to be able to export files w/ node
const fs = require('fs');

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

    // Begin collecting CSS coverage data
    await Promise.all([
        page.coverage.startCSSCoverage()
    ]);

    // Visit desired page
    await page.goto('https://www.google.com');
  
    //Stop collection and retrieve the coverage iterator
    const cssCoverage = await Promise.all([
        page.coverage.stopCSSCoverage(),
    ]);

    //Investigate CSS Coverage and Extract Used CSS
    const css_coverage = [...cssCoverage];
    let css_used_bytes = 0;
    let css_total_bytes = 0;
    let covered_css = "";
    
    for (const entry of css_coverage[0]) {
        
        css_total_bytes += entry.text.length;
        console.log(`Total Bytes for ${entry.url}: ${entry.text.length}`);

        for (const range of entry.ranges){
            css_used_bytes += range.end - range.start - 1;
            covered_css += entry.text.slice(range.start, range.end) + "\n";
        }       
    }

    console.log(`Total Bytes of CSS: ${css_total_bytes}`);
    console.log(`Used Bytes of CSS: ${css_used_bytes}`);
    fs.writeFile("./exported_css.css", covered_css, function(err) {
        if(err) {
            return console.log(err);
        }
        console.log("The file was saved!");
    }); 

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

Étape 6: ASSUREZ-VOUS DE REMPLACER l'URL à ce stade dans le code wait page.goto ('https://www.google.com'); par votre URL

Étape 7: Dans l'outil de ligne de commande (Git Bash), tapez node coverage.js

Un fichier appelé exports_css.css sera créé, il contiendra tout votre CSS de couverture pour l'URL que vous avez définie dans le code.

CAVEAT: Cela extraira le CSS de couverture de TOUS les actifs CSS qui sont chargés à partir de l'URL que vous avez définie. Vous devrez ensuite optimiser davantage ce CSS (non couvert dans cet exemple).

0 commentaires