如何使用 chrome dev 协议获取 CSS Coverage 数据？答案

【问题标题】：How do I fetch CSS Coverage data using chrome dev protocol?如何使用 chrome dev 协议获取 CSS Coverage 数据？
【发布时间】：2017-10-31 12:57:36
【问题描述】：

我正在努力创建一个简单的 java 类，它将在任何给定页面上为我提供使用和未使用的 css。

public class coverage {

    static String str;

    public static void main(String[] args) throws JSONException {

        String url = "https://www.amazon.com";
        Launcher launcher = new Launcher();
        try (SessionFactory factory = launcher.launch();
                Session session = factory.create()) {
            Command command = session.getCommand();
            DOM dom = command.getDOM();
            CSS css = command.getCSS();
            session.navigate(url);
            dom.enable();
            css.enable();
            HashMap<String, List<String>> hm = new HashMap<String, List<String>>();
            HashMap<String, String> hmUsedCSS = new HashMap<String, String>();
            css.startRuleUsageTracking();
            List<RuleUsage> list = css.stopRuleUsageTracking();
            for (RuleUsage coverage : list) {
                if (!hm.containsKey(coverage.getStyleSheetId())) {
                    hm.put(coverage.getStyleSheetId(),                               
                  css.collectClassNames(coverage.getStyleSheetId()));
                }
                if (!coverage.isUsed()) {
                    String existingContent = hmUsedCSS.get(coverage
                            .getStyleSheetId());
                    String extraContent = css.getStyleSheetText(coverage
                            .getStyleSheetId());
                    hmUsedCSS.put(coverage.getStyleSheetId(),
                            existingContent == null ? extraContent
                                    : existingContent + extraContent);
                }
            }

            for (String name : hm.keySet()) {
                List<String> value = hm.get(name);
                System.out.println("Total " + name + "=>" + value);

            }

            for (String name : hmUsedCSS.keySet()) {
                List<String> value = hm.get(name);
                System.out.println("Used CSS " + name + "=>" + value);

            }
        }
    }

}

根据官方documentation，'stopRuleUsageTracking' 会通过在RuleUsage 中设置 'used' 布尔值来告诉我们是否正在使用特定的 CSS，但它会返回页面上所有可用的 CSS 以及 'used ' 设置为 true。我发现答案在于 startoffset 和 endoffset 值，因为它们告诉我们使用的 CSS 的位置。但我不知道如何将这些值转换为有用的和未使用的 CSS 的有意义的结果？有人可以帮我吗？

【问题讨论】：

标签： css google-chrome google-chrome-devtools code-coverage

【解决方案1】：

正如我在问题中指出的那样，关键是根据开始和结束偏移值获取覆盖率数据。我能够编写逻辑来执行相同的操作并获得所需的已使用和未使用 CSS 列表。

【讨论】：