5 ms·

I've been hoping someone would write a similar tool, but using a browser, so that I could run a webapp, click around (using a checklist, to cover all of the vie

by jwr 10y ago

I've been hoping someone would write a similar tool, but using a browser, so that I could run a webapp, click around (using a checklist, to cover all of the views) and get a resulting list of used CSS rules from the browser. That would have the advantage of supporting complex webapps written in any language/environment.

aslushnikov 10y ago
There's a "Coverage Support" experiment in Chrome DevTools which does css + js coverage in a way you describe it. The CSS part was shown on Chrome DevSummit 2016 [1] [1] https://www.youtube.com/watch?v=HF1luRD4Qmk https://www.youtube.com/watch?v=HF1luRD4Qmk
- laurencei 10y ago
  Starts around the 18min mark in the video.
anotheryou 10y ago
States can quickly become complex. Like styles for a logged in user with a 3-years-membership badge or styles for a placeholder that only new users see. Or styles for a CMS module that is currently not in use (e.g. for open positions in a company). I wonder what the least used, yet still used CSS is I ever wrote (relative to project traffic). Maybe some feature a Client requested, I knew he would never really use, but he insisted on (deep linking to some modal for a facbeook post or something).
- jsnathan 10y ago
  It might be hard to do for an existing site of considerable size, but for new sites it could be done incrementally as features are added.
eli 10y ago
I've used this one before https://addons.mozilla.org/en-Us/firefox/addon/css-usage/ https://addons.mozilla.org/en-Us/firefox/addon/css-usage/
geon 10y ago
Etsy did something like that, but on the production site. Every visitor had a small probabillity it would run the code, and after a couple of million visitors, they had a pretty good idea of what styles were unused.
- hackerboos 10y ago
  That would actually solve the use case above (hidden styles triggered by Javascript). A large user base would give you decent coverage.
tyingq 10y ago
There is one built into Chrome's dev tools, in the audit tab: http://imgur.com/a/Va2d0 http://imgur.com/a/Va2d0 It is, though, limited to the context of a single page. You can't browse several pages and then see what the net unused css is. I believe, though, extensions can talk to dev tools, so there's some plausible way to extend it.
nathan3d 10y ago
Sounds pretty similar to Dust-Me Selectors https://addons.mozilla.org/en-Us/firefox/addon/dust-me-selectors/ https://addons.mozilla.org/en-Us/firefox/addon/dust-me-selec...
BurningFrog 10y ago
Ideally it would be a feature in the browser itself. Should be simple. The browser already handles the data. It only needs to dump it somewhere. As important as what classes were used is what classes were in the HTML, but didn't exist. Instead of manually clicking around a webapp, you could do a test suite. This gives another way to measure test coverage. I assume we have to wait for a browser vendor to do this? I haven't seen any plugin/extension feature that reaches this stuff. Then again, we have good open source browsers...

by jwr 10y ago

aslushnikov 10y ago

There's a "Coverage Support" experiment in Chrome DevTools which does css + js coverage in a way you describe it. The CSS part was shown on Chrome DevSummit 2016 [1] [1] https://www.youtube.com/watch?v=HF1luRD4Qmk https://www.youtube.com/watch?v=HF1luRD4Qmk

laurencei 10y ago
Starts around the 18min mark in the video.

anotheryou 10y ago

States can quickly become complex. Like styles for a logged in user with a 3-years-membership badge or styles for a placeholder that only new users see. Or styles for a CMS module that is currently not in use (e.g. for open positions in a company). I wonder what the least used, yet still used CSS is I ever wrote (relative to project traffic). Maybe some feature a Client requested, I knew he would never really use, but he insisted on (deep linking to some modal for a facbeook post or something).

jsnathan 10y ago
It might be hard to do for an existing site of considerable size, but for new sites it could be done incrementally as features are added.

eli 10y ago

I've used this one before https://addons.mozilla.org/en-Us/firefox/addon/css-usage/ https://addons.mozilla.org/en-Us/firefox/addon/css-usage/

geon 10y ago

Etsy did something like that, but on the production site. Every visitor had a small probabillity it would run the code, and after a couple of million visitors, they had a pretty good idea of what styles were unused.

hackerboos 10y ago
That would actually solve the use case above (hidden styles triggered by Javascript). A large user base would give you decent coverage.

tyingq 10y ago

There is one built into Chrome's dev tools, in the audit tab: http://imgur.com/a/Va2d0 http://imgur.com/a/Va2d0 It is, though, limited to the context of a single page. You can't browse several pages and then see what the net unused css is. I believe, though, extensions can talk to dev tools, so there's some plausible way to extend it.

nathan3d 10y ago

Sounds pretty similar to Dust-Me Selectors https://addons.mozilla.org/en-Us/firefox/addon/dust-me-selectors/ https://addons.mozilla.org/en-Us/firefox/addon/dust-me-selec...

BurningFrog 10y ago

Ideally it would be a feature in the browser itself. Should be simple. The browser already handles the data. It only needs to dump it somewhere. As important as what classes were used is what classes were in the HTML, but didn't exist. Instead of manually clicking around a webapp, you could do a test suite. This gives another way to measure test coverage. I assume we have to wait for a browser vendor to do this? I haven't seen any plugin/extension feature that reaches this stuff. Then again, we have good open source browsers...