CRX id
bagpgeanndnifdbdacmckipibgkbkpdp
bagpgeanndnifdbdacmckipibgkbkpdp
Description from extension meta
This extension helps to analize css and javascript coverage reports for multiple resource files and multiple pages at once.
Image from store
Description from store
**The story**
One of important issues with page loading speed optimization is to reduce size of css and javascript resources. Usually optimization tools (like lighthouse) gives us a clue to "cut" unused css rules or javascript functions.
So how to detect what is really unused?
Lately i have discovered chrome coverage tool that I find very useful (https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage). The main limitation of this awesome tools is that it works only in the context of a single page.
Now i hear your say: Right, but my website consists of multiple pages and all of them share same javascript and css resources...
Well, that was my problem too. Till i have decided to write and extension that will be able to analyze coverage data for multiple websites.
**Usage**
Collecting coverage reports:
1. Install DisCoverage extension.
2. Ensure "Allow access to file URLs" on extension management screen is ENABLED (https://user-images.githubusercontent.com/3299098/46309757-2f946c80-c572-11e8-91a9-e417a8ab8981.png)
3. Open developer tools tab (F12). Enable 'coverage' drawler (see instructions at: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage).
4. Load first page you would like to analyze.
5. Inside coverage drawler enable 'Instrument coverage' (click red diode). You should see coverage data inside drawler.
6. On your hard drive prepare folder where you will store coverage reports (.json files).
7. Inside coverage drawler click 'Export...' and save coverage file to prepared folder.
8. Load next page you would like to analize (typical scenariu would be to click links inside already loaded page).
9. Wait for coverage data to be collected and displayed. .
10. Export another report to folder.
11. Repeat steps 7 to 9 till you scan all the pages you would like to analyze.
Loading reports inside the extension:
1. Click extension icon (https://i.imgur.com/a8UtXDx.png).
2. Enter path to folder where you have saved coverage reports (.json f iles). Path should be specified as uri: file:///C:/My/Folder/Path (https://i.imgur.com/tiIh9jE.png)
3. Click ‘Read coverage reports’ (https://i.imgur.com/37UJYEU.png).
4. It may take a while but finally you should see list of loaded files (.css, .js and html).( (https://i.imgur.com/kaMFNBy.png)
Previewing coverage for particular files:
1. Click one of the urls for resource (css, js) you would like to analyze. (https://i.imgur.com/M6i6WTQ.png)
2. Extension will load code preview with lines marked as covered. Note: analyzing minifed files will not be usefull, because most text is inside single line. (https://i.imgur.com/nZy3OK6.png)
3. Hover line number to display popup with information which page cover this line. (https://i.imgur.com/Mlm9P71.png)
4. Click 'Show only covered lines' to reduce code only to covered lines (you can copy this code as minimal required - this is quite save but only for css). (https://i.imgur.com/jRZS4DH.png -> https://i.imgur.com/gCOn3j9.png)
**Chrome coverage tools suggestions**
When analyzing coverage for page ensure:
1. You have resized the screen so that media queries would be applied (otherwise css rules for resolutions different that current will not be detected)
2. You have penetrated parts of the website that are dynamically generated (html loaded form server or generated 'on the fly').
**About author**
Hello, I’m Paweł. I live in Poland and work with great people in xtech.pl company. We are running multiple industry portals (our flag ship is https://www.automatyka.pl). I love programming.
** Limited support **
I give no guarantee for this extension but if you find any issues please post them on trello board: https://trello.com/b/Zh3R07pQ/discoverage-extension
**Version info:**
1.0 – Designed for css file only. Javascript analysis may not useful at the moment.
Latest reviews
- (2021-06-04) 许可: Errors occured while loading files: ( Cannot find any .json files inside specified directory. )
- (2020-01-29) Dario Manoukian: Super helpful extension. Hopefully DevTools will add the feature that allows one to export only the used lines of CSS.
- (2020-01-27) Кирилл Тестин: I just tried the extension on the latest version of Chrome. I put 2 json files in the folder but the extension read only one
- (2020-01-24) Stefano Martini: I "Allow acces to file url but don't word... I I remove or not file/// i get this: Errors occured while loading files: C:\Users\stefanomartini\Desktop\test\ ( Files from directory cannot be loaded. Check if path is correct. ) Errors occured while loading files: ( Cannot find any .json files inside specified directory. )
- (2020-01-21) C. Posthumus: This man deserves a medal! It works like a charm if you just follow the instruction. Version 79.0.3945.117 (Official Build) (64-bit) Windows 10
- (2019-09-16) Jordan Barber: Thanks for the tool and the thorough instructions...however when I go to analyze the different json files by entering the directory path, is says that it cannot find .json files in my directory. The directory only contains 4 json files.
Latest issues
- (2021-04-02, v:1.0.1) Jan Kouba: multipage report
It seems it unfortunatelly marks some styles as unused when other page coverage added to first one. For example on main page the coverahe shows all the cude used and when I add coverage from subpage the final coverage shows some code unused. Am I doing something wrong? - (2020-04-21, v:1.0.1) David Tsai: I can only load 2 files at once
Hi, I seem to only have success when I upload only 2 files, anything more it just keeps loading. I am on an older version of Chrome 65.0.3325.181 if that matters. - (2020-04-15, v:1.0.1) Benjamin Zeuner: Some JSON files give an error
Hi, I created many coverage reports as described in the Overview. When clicking "Read covarage reports" I get the following error on around 20% of the files: Coverage-20200415T140520.json ( Cannot read property 'url' of undefined ) When I open the file I see that there is an URL element available: [ { "url": "https://<url>/wa/css/main.css", "ranges": [ { "start": 0, "end": 99 }, { "start": 100, "end": 121 }, ... and so on. What am I doing wrong? - (2020-04-10, v:1.0.1) Vinko Kolar: "Show only covered lines" doesnt work
Hi, first of all thanks for the plugin, i was looking for it and it seems to be the best solution online. Now the problem: Once I have analyzed a CSS file, e.g. style.css, the plugin shows that only about 5% of the code is used. All the rest is marked red. So it also shows me chrome and so it is correct. When I click on "Show only covered lines" afterwards, only about 1% of the code is removed. Suddenly almost everything is highlighted in green. Something is wrong with the button "show only covered lines". Here is a short video about it: https://www.loom.com/share/c8b220f2370b4e3d9cf6fd77b24880de Thanks. Translated with www.DeepL.com/Translator (free version) - (2020-03-27, v:1.0.1) Lucas Astrada: Unresponsive when working with multiple files
When working with multiple files the message length can be exceeded, leaving the extension unresponsive (infinite loading screen). ----- Uncaught TypeError: Message length exceeded maximum allowed length. at readFinalize (background.js:283) at readFinalize.file (background.js:262) at XMLHttpRequest.xhr.onreadystatechange (background.js:315) ----- - (2020-03-27, v:1.0.1) Lucas Astrada: Cannot find .json files
To those having issues with the extension not finding the coverage reports it might be due to name mismatch. The regex used by the extension is the following `/coverage.*?\json/gmi`, so renaming the reports when exporting could affect the procedure. - (2020-01-27, v:1.0.1) Кирилл Тестин: I put 2 json files in the folder but the extension read only one
I just tried the extension on the latest version of Chrome. I put 2 json files in the folder but the extension read only one - (2019-09-16, v:1.0.1) Jordan Barber: Cannot use tool
When I enter my directory path, I consistently get the error that "( Cannot find any .json files inside specified directory. )" My directory contains nothing but json files.
Statistics
Installs
1,000
history
Category
Rating
3.7 (7 votes)
Last update / version
2019-11-15 / 1.0.1
Listing languages
en