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

Chrome DevTools: Export your raw Code Coverage Data的更多相关文章

  1. [Forward]Improving Web App Performance With the Chrome DevTools Timeline and Profiles

    Improving Web App Performance With the Chrome DevTools Timeline and Profiles We all want to create h ...

  2. Gumshoe - Microsoft Code Coverage Test Toolset

    Gumshoe - Microsoft Code Coverage Test Toolset 2014-07-17 What is Gumshoe? How to instrument a binar ...

  3. 使用Chrome DevTools的Timeline分析页面性能

    随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择.这种方式拥有非常明显的优势:跨平台.开发便捷.便于部署和维护等等,但 ...

  4. Chrome DevTools学习笔记

    ---恢复内容开始--- chrome和firefox的开发者工具大同小异,都非常强大.今天在博客园上看了这篇文章(http://www.cnblogs.com/Wayou/p/chrome-cons ...

  5. Chrome DevTools 调研笔记

    1  说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2  Elements 2.1  功能 检查和实时更新页面的HTML与C ...

  6. 【转】chrome devtools protocol——Web 性能自动化

    前言 在测试Web页面加载时间时,可能会是这样的: 打开chrome浏览器. 按F12打开开发者工具. 在浏览器上打开要测试的页面 查看开发者工具中Network面板的页面性能数据并记录 或者在开发者 ...

  7. iOS 9 学习系列: Xcode Code Coverage

    Code coverage 是一个计算你的单元測试覆盖率的工具. 高水平的覆盖给你的单元測试带来信心.也表明你的应用被彻底的測试过了. 你可能写了几千个单元測试,但假设覆盖率不高.那么你写的这套測试可 ...

  8. 测试工具 - IDEA - IDEA Code Coverage

    概述 使用 idea 自带的 code coverage 工具 背景 了解 白盒测试用例设计 和 测试覆盖率 之后, 大概就需要 实践 了 实践的话, 还是需要 工具 来检验效果 工具选取 选项 Ja ...

  9. Chrome DevTools – 键盘和UI快捷键参考

    Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间. 本指南提供了Chrome DevTools中每个快捷键的快速参考.虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于 ...

随机推荐

  1. 关于工具类中@Autowired注入为NULL的问题记录

      记录:在实体类中加入@Component注解和@Autowired注解时Service不能注入成功. @Component //把普通pojo实例化到spring容器中 0 public clas ...

  2. win10系统同时安装python2.7和python3.6

    我是先在本机上安装的python3.6.5,因为要学习一个框架,但是这个框架只支持python2,所以我又安装了python2.7.15,并且配置到系统环境变量 环境变量配置了python3.6.5的 ...

  3. 「BZOJ1691」[Usaco2007 Dec] 挑剔的美食家 (Treap)

    Description 与很多奶牛一样,Farmer John那群养尊处优的奶牛们对食物越来越挑剔,随便拿堆草就能打发她们午饭的日子自然是一去不返了.现在,Farmer John不得不去牧草专供商那里 ...

  4. 通俗讲解MOSFET

    一位工程师曾经对我讲,他从来不看MOSFET数据表的第一页,因为“实用”的信息只在第二页以后才出现.事实上,MOSFET数据表上的每一页都包含有对设计者非常有价值的信息.但人们不是总能搞得清楚该如何解 ...

  5. nio再学习之通道channel

    通道(Channel):用于在数据传输过程中,进行输入输出的通道,其与(流)Stream不一样,流是单向的,在BIO中我们分为输入流,输出流,但是在通道中其又具有读的功能也具有写的功能或者两者同时进行 ...

  6. Typescript学习笔记(二)枚举

    跟随handbook的脚步,详细介绍一下枚举. enum Direction { Up = 1, Down, Left, Right } 一个枚举类型可以包含零个或多个枚举成员,每个枚举成员可以是一个 ...

  7. springAop @AfterReturning注解 获取返回值

    @AfterReturning(returning="rvt", pointcut="@annotation(com.sinosoft.redis.cache.PutCa ...

  8. Manjaro下安装VirtualBox

    安装前需要知道 你需要知道你当前的内核版本 uname -r,比如输出了4.14.20-2-MANJARO那么你的内核版本为414 安装VirtualBox sudo pacman -S virtua ...

  9. bouncing-balls

    效果如下: 代码目录如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charse ...

  10. PMP项目管理考试培训机构内部资料打包赠送(3个PPT)

    PMP认证考试我自己这边是今年6月份考过了的,手里觉得对自己有帮助的资料就是这3个PPT,讲解的比较清晰,知识点详细.结合自己做的笔记,备考十分轻松.所以推荐大家也看一下. 有需要的可以联系. PPT ...