原文：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代碼，這個(gè)對(duì)于使用模板的前端工作者進(jìn)行前端優(yōu)化很有幫助

命令行打開Coverage界面：command+shift+P(mac)/Ctrl+Shift+P(windows,linux)；如下圖方式，也可以打開Coverage界面

使用Escape可以打開或者關(guān)閉Drawer，自己打開過個(gè)開發(fā)者工具界面，查看效果

在命令行搜索框里搜索Coverage的命令，選擇Show Coverage

出現(xiàn)Coverage界面，選擇記錄按鈕或者刷新界面重新記錄

選擇停止按鈕，停止記錄

如下圖所示，詳細(xì)的分析結(jié)果，圖示紅色行表示未被使用的行，綠色行表示被使用的行，紅綠相間的行表示有的被執(zhí)行，有的未被執(zhí)行，下面還有未被使用的css、js百分比

?

?2、阻止某些請(qǐng)求,如圖，在network下，某個(gè)資源右鍵，可以添加阻止的資源

再次刷新頁面，查看這些資源阻止后的界面效果

?3、無需異步等待

下面的代碼，以前，當(dāng)你調(diào)試test的時(shí)候，總會(huì)被setInterval()?中斷，現(xiàn)在新的版本的瀏覽器，當(dāng)你逐步執(zhí)行異步代碼如?test()，DevTools 從第一行到最后一行步進(jìn)。

function wait(ms) {return new Promise(r => setTimeout(r, ms)).then(() => "Yay"); }// do some work in background. setInterval(() => 42, 200); //每隔200毫秒輸出一個(gè)4位數(shù)整數(shù)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、胖箭頭函數(shù)（() => 42）參考：http://exploringjs.com/es6/ch_arrow-functions.html

轉(zhuǎn)載于:https://www.cnblogs.com/shengulong/p/7163108.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的What's New In DevTools (Chrome 59)来看看最新Chrome 59的开发者工具又有哪些新功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。