DisCoverage

DisCoverage插件简介

DisCoverage插件描述

**The sty**
One of imptant issues with page loading speed optimization is to reduce size of css  javascript resources. Usually optimization tools (like lighthouse) gives us a clue to "cut" unused css rules  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/devtoolsreleasenotes#coverage). The main limitation of this awesome tools is that it wks only in the context of a single page. 

Now i hear your say: Right, but my website consists of multiple pages  all of them share same javascript  css resources...

Well, that was my problem too. Till i have decided to write  extension that will be able to analyze coverage data f multiple websites.

**Usage**
Collecting coverage repts:
1. Install DisCoverage extension.
2. Ensure "Allow access to file URLs" on extension management screen is ENABLED (https://userimages.githubusercontent.com/3299098/463097572f946c80c57211e891a9e417a8ab8981.png)
3. Open developer tools tab (F12). Enable coverage drawler (see instructions at: https://developers.google.com/web/updates/2017/04/devtoolsreleasenotes#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 ste coverage repts (.json files).
7. Inside coverage drawler click Expt...  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 f coverage data to be collected  displayed. .
10. Expt another rept to folder.
11. Repeat steps 7 to 9 till you scan all the pages you would like to analyze.

Loading repts inside the extension:
1. Click extension icon (https://i.imgur.com/a8UtXDx.png).
2. Enter path to folder where you have saved coverage repts (.json f iles). Path should be specified as uri: file:///C:/My/Folder/Path (https://i.imgur.com/tiIh9jE.png)
3. Click ‘Read coverage repts’ (https://i.imgur.com/37UJYEU.png). 
4. It may take a while but finally you should see list of loaded files (.css, .js  html).( (https://i.imgur.com/kaMFNBy.png)

Previewing coverage f particular files:
1. Click one of the urls f 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 infmation 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 f css). (https://i.imgur.com/jRZS4DH.png > https://i.imgur.com/gCOn3j9.png)

**Chrome coverage tools suggestions**
When analyzing coverage f page ensure:
1. You have resized the screen so that media queries would be applied (otherwise css rules f resolutions different that current will not be detected)
2. You have penetrated parts of the website that are dynamically generated (html loaded fm server  generated on the fly).

**About auth**
Hello, I’m Paweł. I live in Pol  wk with great people in xtech.pl company. We are running multiple industry ptals (our flag ship is https://www.automatyka.pl). I love programming.

** Limited suppt **
I give no guarantee f this extension but if you find any issues please post them on trello board: https://trello.com/b/Zh3R07pQ/discoverageextension

**Version info:**
1.0 – Designed f css file only. Javascript analysis may not useful at the moment.
                                

DisCoverage插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 DisCoverageChrome插件v1.0.1版本到本地。

5.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决