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.
Statistics
Installs
1,000
history
Category
Rating
3.7 (7 votes)
Last update / version
2019-11-15 / 1.0.1
Listing languages
en