DisCoverage

**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.