Skip to content

Instantly share code, notes, and snippets.

@mziemer21
Last active Jan 19, 2018
Embed
What would you like to do?
CSS rule coverage example
'use strict';
launchChrome()
.then(async chrome => {
const cdp = await CDP({port: chrome.port});
try {
const {CSS, DOM, Page, Profiler} = cdp;
setupDevToolsTarget(cdp);
await Page.enable();
await DOM.enable();
await CSS.enable();
CSS.startRuleUsageTracking();
Page.navigate({url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy'});
await Page.loadEventFired();
const cssCoverageResults = await CSS.stopRuleUsageTracking();
cssCoverageResults.ruleUsage.sort((a, b) => a.startOffset - b.startOffset);
const cssRule = cssCoverageResults.ruleUsage[0];
// cssRule === { endOffset: 566, startOffset: 17, styleSheetId: "6375.2", used: true }
const cssFile = await CSS.getStyleSheetText({styleSheetId: cssRule.styleSheetId});
const usedCssSelector = cssFile.text.substring(cssRule.startOffset, cssRule.endOffset);
/* usedCssSelector ===
`#toc a,
.external-icon:not([href^='https://mdn.mozillademos.org']):not(.ignore-external):focus:after,
.external-icon:not([href^='https://mdn.mozillademos.org']):not(.ignore-external):focus:before,
.external-icon:not([href^='https://mdn.mozillademos.org']):not(.ignore-external):hover:after,
.external-icon:not([href^='https://mdn.mozillademos.org']):not(.ignore-external):hover:before,
.waffle-sample .open-in-host:focus,
.waffle-sample .open-in-host:hover,
article a,
article a[name]:active,
article a[name]:focus,
article a[name]:hover {
text-decoration: none
}
.waffle-sample .o`
^^ this last line of the string is a incomplete css selector
*/
return coverage;
} catch (err) {
console.error(err);
} finally {
cdp.close();
chrome.kill();
}
})
.catch(err => console.error(err));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment