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

轉載于:https://www.cnblogs.com/shengulong/p/7163108.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。