Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
How to handle "CSS rule usage tracking is not enabled" error?
See original GitHub issue| Component | Version |
|---|---|
| Operating system | Windows 10 x64 |
| Node.js | 10.14.0 |
| Chrome/Chromium/… | 70, Latest |
| chrome-remote-interface | Latest |
Is Chrome running in a container? YES
Hello, I’m working on my own project. I’m trying to get Images and CSS Coverage for a service. My code doesn’t work and push me Unhandled Rejection “Error: CSS rule usage tracking is not enabled”. How can I handle this?
My code:
const compressSources = (target, targetSlug, id, date, chrome, socket, inputPath, outputPath) => {
return new Promise(async (resolve, reject) => {
let host = url.parse(target.trim()).hostname.split('www.').reverse()[0];
target = typeof(target) == 'string' && target.trim() != '' ? target.trim() : false;
if(target) {
const protocol = await CDP({ port: chrome.port });
const { Network, Page, Runtime, DOM, CSS } = protocol;
let images = {};
let styles = [];
let lock = false;
let complete = false;
let state = null;
let count = 0;
let inputArray = inputPath.replace('*', '').split('/').filter(elem => { if(elem != '') return elem; });
let outputArray = outputPath.split('/').filter(elem => { if(elem != '') return elem; });
await Network.enable();
await Network.clearBrowserCache();
await Network.clearBrowserCookies();
await Runtime.enable();
await DOM.enable();
await CSS.styleSheetAdded(async ({ header }) => {
let { text } = await CSS.getStyleSheetText({ styleSheetId: header.styleSheetId });
header.css = text;
styles.push(header);
});
await CSS.enable();
await CSS.startRuleUsageTracking();
await Page.enable();
await Page.setLifecycleEventsEnabled({ enabled: true });
await Page.navigate({ url: target });
await Network.requestWillBeSent(({ requestId, request, type, initiator }) => {
if(type == 'Image') {
if(typeof(images[requestId]) != 'undefined') {
images[requestId].request = request;
} else {
images[requestId] = {};
images[requestId].request = request;
};
};
});
await Network.responseReceived(async ({ requestId, response, type }) => {
if(type == 'Image') {
images[requestId].response = response;
if(response.status == 200 && mimeTypeRegExp.test(response.mimeType)) {
if(path.parse(url.parse(response.url.trim()).pathname).ext != '' || dataImageRegExp.test(response.url.trim())) {
let pathOfURL = url.parse(response.url.trim()).pathname;
let base = path.parse(pathOfURL).base;
let filename = path.parse(url.parse(response.url.trim()).pathname).base;
pathOfURL = pathOfURL.split('/');
pathOfURL.shift();
pathOfURL.pop();
var inputPathForThisURL = inputArray.concat(pathOfURL.filter(elem => { if(elem != '') return elem; })).join('/');
var outputPathForThisURL = outputArray.concat(pathOfURL.filter(elem => { if(elem != '') return elem; })).join('/');
recursivePathCreator(inputPathForThisURL.split('/'), []);
recursivePathCreator(outputPathForThisURL.split('/'), []);
(() => {
download(response.url.trim(), path.join(inputPathForThisURL, path.parse(url.parse(response.url.trim()).pathname).base))
.then(async () => {
compressor(`./${inputPathForThisURL}/${filename}`, `./${outputPathForThisURL}/`, target, id)
.then(async res => {
if(res === true) {
count += 1;
let imgObject = {
target: target,
cdn: `https://top.ams3.digitaloceanspaces.com/${targetSlug}/${id}/img${inputPathForThisURL.split(`data/${targetSlug}/${id}/img`)[1]}/${path.parse(response.url.trim()).base}`,
compressedCdn: `https://top.ams3.digitaloceanspaces.com/${targetSlug}/${id}/cimg${inputPathForThisURL.split(`data/${targetSlug}/${id}/img`)[1]}/${path.parse(response.url.trim()).base}`,
zip: `https://top.ams3.digitaloceanspaces.com/${targetSlug}/${id}/zip/img.zip`,
compressedZip: `https://top.ams3.digitaloceanspaces.com/${targetSlug}/${id}/zip/cimg.zip`,
id: id,
time: date.getTime()
};
let { error } = validateIMGFile(imgObject);
if(error) reject(error);
let imgData = new IMG(imgObject);
await imgData.save();
};
})
.catch(err => {
reject(err);
});
})
.catch(err => {
reject(err);
});
})();
};
};
};
});
await Page.lifecycleEvent(async res => {
state = res.name;
console.log('Life Cycle Event is', res.name);
if(state == 'networkIdle' && !lock && !complete) {
lock = true;
complete = true;
console.log('İşlem başladı!');
await Runtime.evaluate({
expression: `
new Promise((resolve, reject) => {
let height = Number(document.documentElement.scrollHeight);
let piece = height / 8;
let now = 0;
let last = 0;
let tid = setInterval(() => {
if(now <= height && height != 0) {
now += piece;
window.scrollTo({ top: now, behavior: 'smooth' });
if(Number(document.documentElement.scrollHeight) != height) {
last = height;
height = Number(document.documentElement.scrollHeight);
piece = (height - now) / 8;
console.log('Last:', last, 'Height:', height, 'Now:', now, 'Piece', piece, 'Updated!');
};
console.log('Last:', last, 'Height:', height, 'Now:', now, 'Piece', piece, 'Updated!');
} else {
clearInterval(tid);
resolve();
};
}, 700);
});
`,
awaitPromise: true
});
console.log('Into the bottom!');
if(state == 'networkIdle') {
let { coverage } = await CSS.takeCoverageDelta();
console.log('1', coverage);
// Coverage bilgisinin kaydını durdur
await CSS.stopRuleUsageTracking();
styles = styles.filter(style => {
return !style.isInline && style.sourceURL.trim().length > 0;
});
styles.forEach(style => {
style.used = [];
let parsedSourceURL = url.parse(style.sourceURL.trim());
if(parsedSourceURL.protocol === null && parsedSourceURL.host === null) {
if(style.sourceURL.trim().startsWith('/')) {
style.sourceURL = `${target}${style.sourceURL.trim()}`;
} else {
style.sourceURL = `${target}/${style.sourceURL.trim()}`;
};
};
style.parentCSS = -1;
style.childCSSs = [];
style.childCSSs = getImports(style.css, style.sourceURL.trim());
coverage.forEach(item => {
if(item.styleSheetId.trim() == style.styleSheetId.trim()) {
style.used.push(item);
};
});
style.used.sort((a, b) => a.endOffset - b.endOffset);
let compressedCss = "";
if(style.used.length > 0) {
style.used.forEach(usedRule => {
compressedCss += style.css.slice(usedRule.startOffset, usedRule.endOffset);
});
};
style.compressedCss = compressedCss;
});
styles = preTraverse(styles, targetSlug, id);
if(count == Object.keys(images).length) {
fs.readFile(`./data/${targetSlug}/${id}/cimg/statistics.json`, async (err, data) => {
if(err) reject(err);
try {
data = JSON.parse(data);
//socket.emit('log', { stage: 5.1, data });
// Google Chrome'u ve Chrome Remote Interface'ı kapat
await protocol.close();
if(typeof(styles) !== 'undefined' && styles.length > 0) {
console.log('CSS Dosyaları İşlendi!');
socket.emit('log', {stage: 4, data: styles});
resolve({ images, data, styles });
} else {
console.log('CSS Dosyaları İşlendi!');
resolve({ images, data, styles: null });
};
} catch(e) {
reject(e);
};
});
};
};
};
if(state == 'networkIdle' && lock) {
lock = false;
let { coverage } = await CSS.takeCoverageDelta();
console.log('2', coverage);
// Coverage bilgisinin kaydını durdur
await CSS.stopRuleUsageTracking();
styles = styles.filter(style => {
return !style.isInline && style.sourceURL.trim().length > 0;
});
styles.forEach(style => {
style.used = [];
let parsedSourceURL = url.parse(style.sourceURL.trim());
if(parsedSourceURL.protocol === null && parsedSourceURL.host === null) {
if(style.sourceURL.trim().startsWith('/')) {
style.sourceURL = `${target}${style.sourceURL.trim()}`;
} else {
style.sourceURL = `${target}/${style.sourceURL.trim()}`;
};
};
style.parentCSS = -1;
style.childCSSs = [];
style.childCSSs = getImports(style.css, style.sourceURL.trim());
coverage.forEach(item => {
if(item.styleSheetId.trim() == style.styleSheetId.trim()) {
style.used.push(item);
};
});
style.used.sort((a, b) => a.endOffset - b.endOffset);
let compressedCss = "";
if(style.used.length > 0) {
style.used.forEach(usedRule => {
compressedCss += style.css.slice(usedRule.startOffset, usedRule.endOffset);
});
};
style.compressedCss = compressedCss;
});
styles = preTraverse(styles, targetSlug, id);
if(count == Object.keys(images).length) {
fs.readFile(`./data/${targetSlug}/${id}/cimg/statistics.json`, async (err, data) => {
if(err) reject(err);
try {
data = JSON.parse(data);
//socket.emit('log', { stage: 5.1, data });
// Google Chrome'u ve Chrome Remote Interface'ı kapat
await protocol.close();
if(typeof(styles) !== 'undefined' && styles.length > 0) {
console.log('CSS Dosyaları İşlendi!');
socket.emit('log', {stage: 4, data: styles});
resolve({ images, data, styles });
} else {
console.log('CSS Dosyaları İşlendi!');
resolve({ images, data, styles: null });
};
} catch(e) {
reject(e);
};
});
};
};
});
} else {
reject(new Error('Belirtilen Web Sayfası Adresi Uygun Değil!'));
};
});
};
Also, if there is any logic mistakes and wrong uses, please tell me. Thanks a lot!
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Handling common HTML and CSS problems - MDN Web Docs
Basically, it is a matter of checking whether your HTML and CSS code is well formed and doesn't contain any syntax errors. Note:...
Read more >Find invalid, overridden, inactive, and other CSS
Something is wrong. The first thing to do is inspect the element and make sure that your new CSS is actually applied to...
Read more >How To Effectively Debug CSS | Bug Tracking Blog ...
Debugging properties. There are cases where we do not understand why a style rule does not apply or is not working. The Chrome...
Read more >Session Replay Troubleshooting
Some HTML elements are not visible at replay · Fonts or images do not render properly · CSS rules not properly applied/mouse hover...
Read more >CSS/JS Issues | Troubleshooting | LSCache for WordPress
Visit your site with optimizations disabled by appending /?LSCWP_CTRL=before_optm to the end of your URL. This ensures that you are getting a ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
You could’ve just comment, I’m notified even for closed issues… Anyway, same problem, different code?
The sequence of operations must be:
Make sure you’re enforcing this.
Cheers, man! 😃