How do I fetch CSS Coverage data using chrome dev protocol? - css

Question

I am working on creating a simple java class which would give me used & unused css on any given page.
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);
}
}
}
}
As per official documentation, 'stopRuleUsageTracking' would tell us whether a particular CSS is being used or not by setting 'used' boolean in RuleUsage , but it is returning all the CSS available on the page with 'used' set to true.I figured out that the answer lies in startoffset & endoffset values as they tell us the positioning of used CSS.But I don't know how to convert these values into meaningful result of Used & Unused CSS ? Can someone help me out here?

Answer 1

As I pointed out in the question , the key was to fetch coverage data as per start & end offset values.I was able to write logic to do the same & got the required list of used & Unused CSS.