原文: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. NGINX: 限制连接的实践 (Defense DDOS)

    参考: [ nginx防止DDOS攻击配置 ] 关于限制用户连接,Nginx 提供的模块: [ ngx_http_limit_req_module ] [ ngx_http_limit_conn_mo ...

  2. twitter api取出的日期格式化

    import pickle import datetime crate_time_list=[] twitter_id_list=[] twitter_url_list=[] twitter_text ...

  3. 汉字hash问题(转)

    一.汉字编码的种类 汉字编码中现在主要用到的有三类,包括GBK,GB2312和Big5. 1.GB2312又称国标码,由国家标准总局发布,1981年5月1日实施,通行于大陆.新加坡等地也使用此编码.它 ...

  4. 【LYOI2016】EasyRound1

    这可能是给新高一写的吧……随手写着玩玩…… A:随便模拟 #include<cstdio> #include<cstring> using namespace std; int ...

  5. shell 通过ANSI转换颜色

    格式: echo -e "\033[字背景颜色;字体颜色m字符串\033[控制码" 如果单纯显示字体颜色可以固定控制码位0m. 格式: echo -e "\033[字背景 ...

  6. 【SQL】服务器环境下的SQL

    一.大型数据库的三层体系结构 web服务器:比如在淘宝页面上,输入“牛肉干”,就是web服务器来处理,提交给应用服务器. 应用服务器:在获取到“牛肉干”这个请求后,应用服务器决定如何汇集结果,并进行相 ...

  7. 回车和换行有什么区别?我们平时按下的Enter键是回车还是换行?

    来源:http://www.52rd.com/blog/Detail_RD.Blog_imjacob_12317.html -------------------------------------- ...

  8. CSU七月校赛B

    #include <iostream> #include<cstdio> #include<algorithm> #include<cstring> # ...

  9. CodeForces 32C Flea

    题目链接:http://codeforces.com/problemset/problem/32/C 本文链接:http://www.cnblogs.com/Ash-ly/p/5513436.html ...

  10. 用JDBC操作MySQL——获取表的大小

    JDBC中获取MySQL我们有时需要获得表的大小,这包括了表的行数和列数,我们可以分别用以下的方法得到: 假设我们得到了一个ResultSet对象rs,则操作如下: 读取结果集前获取行数: rs.la ...