About the Coverage Tool

The various columns in the tool are:

• URL: The origin of the JS or CSS file.
• Type: Mention the file type, either CSS or JS.
• Total Bytes: Mention the total size of the file in bytes.
• Unused Bytes: Mention the unused code size in bytes.
• Usage Visualization: Shows a bar representing the used code and the unused code in red and blue, respectively.

The various options present in the tool are:

• Choose Coverage Granularity: You can choose the level of data displayed by selecting Per block or Per function. Per block measures, each line of code, and Per function measures the method of the code. Per block has significant overhead in the user’s system.
• Refresh: Click it to reload the requested files.
• Clear All: Click it to clear all the lists of files and the data from the tool.
• Export: Click it to export the coverage data in JSON format.
• URL filter: Search text in the listed URL.
• Coverage Type: Filter the listed file on the basis of JS or CSS file type.
• Content scripts: Check it to also display the file requests of extensions having context to the web page.

The Coverage Tool is a very basic tool that displays various files requested by the webpage to the server. It provides various information about the file such as URL, type, total bytes, and unused bytes. The tool is mostly used to find out the JS and CSS code that is not being used by the site. This information is very important to remove unwanted or unused code that takes a lot of memory which helps the developers to speed up the web page loading and performance.