This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

This article introduces the Coverage panel in Chrome.

The Coverage feature uses Dynamic Analysis to gather runtime Coverage, allowing developers to see how much of their code is glowing. Dynamic analysis refers to the process of collecting code execution data while the application is running; in other words, coverage data is collected through markup during code execution.

Open the way

After opening DevTools in Chrome, press Esc to bring up another panel. If Rendering is not present on the panel, press the “More” button on the far left and click display.

Recorded data

In the Coverage panel, click Refresh to see the code “including JS and CSS” usage for that page.

There are three buttons in the upper left corner of the Coverage panel. Click the record button to start recording, while the record button turns red. Click the record button again to stop recording and display the recorded Coverage data. Alternatively, you can click the shortcut button in the middle, “Refresh and start recording”, and stop recording when the page loads.

View the data

As shown in the figure above, the Coverage recording result table shows all JS and CSS files loaded during recording, as well as the size and runtime Coverage of each file. The summary data is displayed in the status bar at the bottom of the page. Clicking on a single static resource opens it in the Sources panel, with a red and green bar to the left of the code line number to indicate whether the code was executed during recording. Green is what was done, red is what was not done.

To optimize the

Based on the code execution rate in the data above, we can take some optimization measures.

  • Remove code that has not been executed.
  • Postponing the loading of unexecuted code.
  • Split code into executed and unexecuted logic.

One last word

If this article is helpful to you, or inspired, help pay attention to it, your support is the biggest motivation I insist on writing, thank you for your support.