Larger files take more time to download when doing front-end performance testing and can cause our website to load slowly, resulting in a poor user experience. So it is necessary to delete unused code in JS and CSS! Coverage tools can be very convenient to achieve this requirement.
How to use Coverage
Coverage is a function of the chrome developer tool. It can be used to detect which js and css are already running when the code is running on the website, and which js and css are not yet used. . We can start it in the source panel of Chrome's developer tools, select the three dot icon in the figure below, and then select Coverage in the menu.
After starting Coverage, click the refresh button in the figure below to perform code coverage statistics on the JS and CSS scripts involved in the current page.
The specific statistics are shown in the figure below. The number of css and js files we loaded is displayed on the far right. The red area indicates the code that has been run, while the blue area indicates the code that has been loaded but not run.
Coverage can be used to find unused js and css codes in the page, we can provide users with only necessary codes and delete unused codes, so that the performance of the page can be improved, which is very important for finding out the code that can be split Scripts and lazy loading of non-critical scripts.
Problems with coverage in higher versions of chrome
Here I will share with you a difficult problem I encountered.
In the source panel of chrome 116, when the pretty print mode is set to display the code, the specific code utilization cannot be fully displayed, that is, the red and blue lines on the left will appear missing (the specific reason is temporarily unknown), as shown in the figure above.
However, this problem can be avoided in the chrome 90 version. As shown in the figure below, we can clearly see which codes are executed (blue) and which codes are not executed (red), so students who want to check the code utilization in detail Use the chrome 90 version.
The download link of chrome 90 version is as follows:
https://download.csdn.net/download/liwenxiang629/88248901
Every article of mine hopes to help readers solve problems encountered in actual work! If the article helped you, please like, bookmark, forward! Your encouragement is my biggest motivation to keep updating articles!