原文:https://developers.google.com/web/updates/2017/04/devtools-release-notes#command-menu

参考:https://developers.google.com/web/tools/chrome-devtools/ui#command-menu

1、css、js代码覆盖率:就是找到哪些未使用的css、js代码,这个对于使用模板的前端工作者进行前端优化很有帮助

命令行打开Coverage界面:command+shift+P(mac)/Ctrl+Shift+P(windows,linux);如下图方式,也可以打开Coverage界面

使用Escape可以打开或者关闭Drawer,自己打开过个开发者工具界面,查看效果

在命令行搜索框里搜索Coverage的命令,选择Show Coverage

出现Coverage界面,选择记录按钮或者刷新界面重新记录

选择停止按钮,停止记录

如下图所示,详细的分析结果,图示红色行表示未被使用的行,绿色行表示被使用的行,红绿相间的行表示有的被执行,有的未被执行,下面还有未被使用的css、js百分比

2、阻止某些请求,如图,在network下,某个资源右键,可以添加阻止的资源

再次刷新页面,查看这些资源阻止后的界面效果

3、无需异步等待

下面的代码,以前,当你调试test的时候,总会被setInterval() 中断,现在新的版本的浏览器,当你逐步执行异步代码如 test(),DevTools 从第一行到最后一行步进。

function wait(ms) {
return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
} // do some work in background.
setInterval(() => 42, 200); //每隔200毫秒输出一个4位数整数 async function test() {
debugger;
const hello = "world";
const response = await fetch('index.html');
const tmp = await wait(1000);
console.log(tmp);
return hello;
} async function runTest() {
let result = await test();
console.log(result);
}

4、胖箭头函数(() => 42)参考:http://exploringjs.com/es6/ch_arrow-functions.html

What's New In DevTools (Chrome 59)来看看最新Chrome 59的开发者工具又有哪些新功能的更多相关文章

  1. 我所不知道的 Chrome 开发者工具

    http://www.oschina.net/translate/things-i-didnt-know-about-chrome-devtools 自打我开始进行Web开发后,我就一直将Firebu ...

  2. Chrome开发者工具Debug入门

    译者按: 手把手教你摆脱console.log,掌握高级的debug方法. 原文: Learn How To Debug JavaScript with Chrome DevTools 译者: Fun ...

  3. Chrome开发者工具之测试应用

    一.Chrome开发者工具简介 浏览器的开发者工具(DevTools)可以帮助开发人员对网页进行布局,比如HTML+CSS,帮助前端工程师更好的调试脚本(JavaScript.jQuery)之类的,还 ...

  4. 神器——Chrome开发者工具(一)

    这里我假设你用的是Chrome浏览器,如果恰好你做web开发,或者是比较好奇网页中的一些渲染效果并且喜欢折腾,那么你一定知道Chrome的开发者工具了.其实其他浏览器也有类似工具,比如Firefox下 ...

  5. 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试

    转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...

  6. Chrome开发者工具中Elements(元素)断点的用途

    SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间. 需求:需要找到哪行JavaScript代码不断刷新的按钮文字. 按照经验判断,这个文字肯定是一 ...

  7. Chrome 开发者工具(DevTools)中所有快捷方式列表

    Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间.下面列出了每个快捷键在Windows/Linux及Mac中的对应键.其中一些快捷键对于Dev ...

  8. Chrome 开发者工具(DevTools)中所有快捷方式列表(已整理)

    Chrome 开发者工具(DevTools)中所有快捷方式列表(已整理) 前言 Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间.下面列出了每 ...

  9. Chrome DevTools开发者工具调试

    1-1 Chrome DevTools 功能简介 (九大功能面板) (1)Elements元素面板 检查和调整页面,调试DOM,调试CSS (2)Network网络面板 调试请求,了解页面静态资源分布 ...

随机推荐

  1. [转载]解决clickonce不支持administer权限问题

    转自ClickOnce deployment vs. requestedExecutionLevel = requireAdministrator ClickOnce方式部署应用简单方便,估计很多人都 ...

  2. 文本区 JTextArea 的使用

    文本区JTextArea是对多行文本进行编辑的组件,用空字符来控制文本的格式.eg:"\n"为换行,"\t"为插入一个Tab字符. 文本去JTextArea的常 ...

  3. Linux下的Backlight子系统(一)【转】

    转自:http://blog.csdn.net/weiqing1981127/article/details/8511676 版权所有,转载必须说明转自 http://my.csdn.net/weiq ...

  4. Java常见知识点(二)

    21.常量池专门用于管理在编译时被确定并被保存在已编译的.class文件中的一些数据.它包括了关于类.方法.接口中的常量,还包括字符串常量.   22.String已经重写了Object的equals ...

  5. 使用System.getProperty("line.separator")时没有换行问题解决

    项目中要实现替换模版txt文本里面的内容,然后生成新的文档,其中先把模版文本的内容通过创建的 BufferedReader bufReader 使用 readLine() 来一行一行读取,所以在完成替 ...

  6. 一个关于Java 多线程问题的知识点

    这个程序运行结果会是什么? public class Main {static class ListAdd { private static List list = new ArrayList(); ...

  7. selenium3+python自动化50-环境搭建(firefox)【转载】

    前言 有不少小伙伴在安装selenium环境后启动firefox报错,因为现在selenium升级到3.0了,跟2.0的版本还有有一点区别的. 安装环境过程中主要会遇到三个坑: 1.'geckodri ...

  8. (一)安装openvpn服务器端

    环境 centos版本 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) 关闭cento ...

  9. 在web项目下注册MySQL数据库驱动失败

    java.lang.ClassNotFoundException: com.mysql.jdbc.Driver at org.apache.catalina.loader.WebappClassLoa ...

  10. 【互动问答分享】第5期决胜云计算大数据时代Spark亚太研究院公益大讲堂

    Spark亚太研究院100期公益大讲堂 [第5期互动问答分享] Q1:spark怎样支持即席,应该不是spark sql吧,是hive on spark么? Spark1.0 以前支持即席查询的技术是 ...