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. IDEA中Git分支未push的变更集如何合并到另一个分支

    使用rebase命令 刚开始,A分支和B分支的代码是一样的,把A分支checkout 为当前分支,并且修改了代码,进行[commit]和[push],commit成功了,但是push没有权限. 这个时 ...

  2. Odoo

    doc 文档 Technical Memento(pdf)是一个简短的参考,有点过时,但仍然不能错过. 目前的官方文档由研发团队积极维护. Nicolas Bessi撰写的新API指南可以提供官方文档 ...

  3. 洛谷CF264D Colorful Stones(子序列匹配,思维)

    洛谷题目传送门 神仙思维题. 对于两个字符串的匹配问题,似乎之前蒟蒻写的HAOI2010最长公共子序列题解中提到的建网格图模型是一种套路? 给一个稍微强一点的样例(把字母换成了ABC) AABCB B ...

  4. Java和操作系统交互细节

    结合 CPU 理解一行 Java 代码是怎么执行的 根据冯·诺依曼思想,计算机采用二进制作为数制基础,必须包含:运算器.控制器.存储设备,以及输入输出设备,如下图所示. enter image des ...

  5. NOIP经典基础模板总结

    date: 20180820 spj: 距离NOIP还有81天 目录 STL模板: priority_queue 的用法:重载<,struct cmpqueue 的用法 stack 的用法vec ...

  6. Codeforces | CF1000B 【Light It Up】

    蒟蒻第二篇题解... 比赛的时候写这道题MLE了qwq..根据CF的赛制我也没敢再交第二次.. 简单讲一下思路好了(假装是dalao)..根据题意要加一个或者不加新的点..如果加一个新的点意味着从这个 ...

  7. cf1000E We Need More Bosses (tarjan缩点+树的直径)

    题意:无向联通图,求一条最长的路径,路径长度定义为u到v必须经过的边的个数 如果把强联通分量都缩成一个点以后,每个点内部的边都是可替代的:而又因为这是个无向图,缩完点以后就是棵树,跑两遍dfs求直径即 ...

  8. Zabbix3.4监控平台部署

    环境依赖 CentOS 7.3 + PHP5.4 + MariaDB + Nginx Zabbix Server 3.4.1 环境要求 12 CPU ,最少8 CPU 32G 内存,最少16G 1T ...

  9. 20165223 实验一 Java开发环境的熟悉

    目录 一.实验报告封面 二.实验内容 (一)命令行下的JAVA程序开发 (二)IDEA中的JAVA程序开发 (三)自主练习 三.实验总结 四.PSP时间 一.实验报告封面 北京电子科技学院(BESTI ...

  10. C# Winform多窗体&&构造函数传值

    一.多窗体:三种打开窗体的状态: 最最基础的弹窗: //写在按钮的点击事件内: //实例需要弹出的窗口的类: Form2 f2 = new Form2(); f2.Show(); 1.弹窗窗口: // ...