What's New In DevTools (Chrome 59)來看看最新Chrome 59的開發者工具又有哪些新功能
阿新 • • 發佈：2017-07-13
來看 nbsp work 效果 linux 工作者 drawer 表示 cnblogs
原文：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下，某個資源右鍵，可以添加阻止的資源
再次刷新頁面，查看這些資源阻止後的界面效果
What's New In DevTools (Chrome 59)來看看最新Chrome 59的開發者工具又有哪些新功能