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的開發者工具又有哪些新功能