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. Docker镜像的使用

    当运行容器时,使用的镜像如果在本地中不存在,docker 就会自动从 docker 镜像仓库中下载,默认是从 Docker Hub 公共镜像源下载. 下面我们来学习: 1.管理和使用本地 Docker ...

  2. [CEOI2007] 树的匹配Treasury

    类型:树形 DP 传送门:>Here< 题意:给一棵树,你可以匹配有边相连的两个点,问你这棵树的最大匹配是多少,并且计算出有多少种最大匹配. 解题思路 首先树形Dp是很明显的,$f[i][ ...

  3. CSAPC2008 skyline

    一座山的山稜线由许多片段的45度斜坡构成,每一个片段不是上坡就是下坡. *    *   *  /\*  /\  /\/   \/\/  \/        \ 在我们眼前的所见的任何宽度为n个单位的 ...

  4. 【XSY1762】染色问题 网络流

    题目描述 给定一张\(n\)个点\(m\)条边的无向图.每个顶点有一个颜色,要么是黑,要么是白.我们想进行一些操作,使得最终每一条边的两个端点都是不同的颜色.每一次操作,你可以将一条边的两个端点交换颜 ...

  5. swagger2 如何匹配多个controller

    方法一:使用多个controller的共同拥有的父类,即精确到两个controller的上一级 @Bean public Docket createRestApi() { return new Doc ...

  6. 【 HDU 1538 】A Puzzle for Pirates (海盗博弈论)

    BUPT2017 wintertraining(15) #5D HDU 1538 偷懒直接放个果壳的链接了,感觉比网上直接找这题的题解要更正确.易懂. 海盗博弈论 代码 #include <cs ...

  7. Codeforces Round #453 (Div. 1) D. Weighting a Tree(构造)

    题意 一个 \(n\) 个点 \(m\) 条边的无向连通图中每个点都有一个权值,现在要求给每条边定一个权值,满足每个点的权值等于所有相连的边权之和,权值可负. 题解 如果图是一棵树,那么方案就是唯一的 ...

  8. JSON数组形式字符串转换为List<Map<String,String>>的几种方法

    package com.zkn.newlearn.json; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArr ...

  9. HDU1269迷宫城堡(裸Tarjan有向图求强连通分量个数)

    迷宫城堡Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  10. 【转】WEB服务器与应用服务器的区别

    https://blog.csdn.net/liupeng900605/article/details/7661406 一.简述 WEB服务器与应用服务器的区别: 1.WEB服务器: 理解WEB服务器 ...