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. 「JLOI2015」城池攻占 解题报告

    「JLOI2015」城池攻占 注意到任意两个人的战斗力相对大小的不变的 可以离线的把所有人赛到初始点的堆里 然后做启发式合并就可以了 Code: #include <cstdio> #in ...

  2. multimap多重映照容器

    //multimap的基本用法 #include<map> #include<iostream> #include<string> using namespace ...

  3. 万物互联之~RPC专栏

    3.RPC引入 上篇回顾:万物互联之~深入篇 Code:https://github.com/lotapp/BaseCode/tree/master/python/6.net/6.rpc/ 其他专栏最 ...

  4. OpenLayers学习笔记(五)— 拖拽Feature图层

    参考文档的例子可以知道如何拖动矢量图层feature GitHub: 八至 作者:狐狸家的鱼 本文链接:拖拽Feature图层 全部代码 <!DOCTYPE html> <html& ...

  5. A1108. Finding Average

    The basic task is simple: given N real numbers, you are supposed to calculate their average. But wha ...

  6. Linux基本命令总结(三)

    接上篇: 11,more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示 ...

  7. win32: WM_PAINT 实现双缓冲缓图

    相关参考资料: GDI下实现双缓冲 - http://jingyan.baidu.com/article/e73e26c0f8df2424acb6a76e.html <Win32_19>用 ...

  8. vue.js自定义组件directives

    自定义指令:以v开头,如:v-mybind. <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value ...

  9. 【译】2. Java反射——Class对象

    原文地址:http://tutorials.jenkov.com/java-reflection/classes.html ====================================== ...

  10. 关于用户输入恶意js

    有些黑客经常闲得蛋疼的那别人的网站测试,利用一些输入的漏洞提交js代码,搞恶作剧. 对于freemarker视图的web应用,可以参考以下方法: http://yshjava.iteye.com/bl ...