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

原文：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