歡迎來到新一期的 DevTools 更新日誌。以下是 Chrome 59 中的新功能。
亮點
- CSS 和 JS 代碼覆蓋率。通過新增的覆蓋率面板來發現未使用的 CSS 與 JS。
- 完整的页面截图。截取一张从视图最顶端到最底端的页面快照。
- 禁用請求。在網絡面板中可以手動禁用某條請求。
- 調試 async await。連貫地調試 async await。
- 統一的命令面板。將命令執行與文件打開的菜單面板進行了整合。
新功能
CSS 和 JS 代碼覆蓋率
通過新增的覆蓋率面板來發現未使用的 CSS 與 JS 代碼。頁面或代碼加載後，此面板內會告訴你哪些代碼未使用，哪些又是使用了的。這樣可以精簡掉未使用的代碼來減小頁面的大小。
在URL上點擊將會在源代碼面板中顯示哪些代碼行被使用。
每行代碼都是有顏色的:
- 青色代表那代碼已使用。
- 紅色代表那代碼未使用。
- 一行紅色和綠色的代碼（就像圖2的第三行Figure 2），是代表只有部分的代碼已使用。 例如: 三元表達式的代碼:
var b = (a > 0) ? a : 0是紅色和綠色。
要打開覆蓋率面板:
- 呼出命令面板。
- 輸入
Coverage然後選擇 Show Coverage。
完整的頁面截圖
觀看以下視頻來了解如何截取頁面的完整快照，從頂部一直滾動到頁面最底那種截圖。
禁用請求
想看看當某些腳本、樣式文件缺少或者其他資源加載失敗時，網頁的樣子嗎？在網絡面闆對某條請求右擊選擇 Block Request URL。一個新的 禁用請求 面板會被呼出，在這裡可以管理被禁用的請求。
調試 async await
一直以來，想要調試類似下面這樣的代碼是件很頭疼的事。當你斷在 test() 裡面時，繼續調試，會被 setInterval() 而打斷。在新版中再來調試 test() 就不一樣了，可以一口氣從第一行連續地斷到最後一行。
function wait(ms) {
return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
}
// 在後台做一些工作
setInterval(() => 42, 200);
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);
}
PS: 想提高調試水平嗎？看看這些資源:
變更點
統一的命令面板
現在打開命令面板 ，你會發現輸入框中自動添加了一個大於號 (>)。這是因為命令面板與通過 Command+O (Mac) 或者 Control+O
(Windows, Linux) 呼出的文件打開菜單面板進行了合併。