css - 如何使用 chrome dev 协议(protocol)获取 CSS Coverage 数据？

Question

我正在努力创建一个简单的 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' bool 值来告诉我们是否正在使用特定的 CSS ，但它返回页面上所有可用的 CSS，并将“已用”设置为 true。我发现答案在于 startoffset 和 endoffset 值，因为它们告诉我们已用 CSS 的定位。但我不知道如何将这些值转换为 Used & Unused CSS 的有意义的结果？有人可以帮我吗？

Answer 1

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