The Code Coverage tool visually shows you which lines of code in your CSS and JavaScript are used and unused. You can now export your raw Code Coverage data which then opens up possibilities for tooling integration, such as a tool which can modify your CSS/JS based on its used/unused code.

To try this feature:

Open up the Coverage pane by clicking the three dots in the drawer and

  • Selecting Coverage
  • Select Start Instrumenting coverage and reload Page
  • Click the Export button

Example

[{
"url": "https://example.com/main.css",
"ranges": [{
"start": 0,
"end": 106
},
{
"start": 531,
"end": 787
}
],
"text": "body{margin:0;font-family:\"Helvetica Neue\",\"Helvetica\",Helvetica,Arial,sans-serif}*{box-sizing:border-box}.header{background-color:#efefef;padding:10px 30px;display:flex;justify-co...."
}]

原文:Chrome DevTools: Export your raw Code Coverage Data

04-16 03:49