Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

DevTools 更新點 (Chrome 59)

歡迎來到新一期的 DevTools 更新日誌。以下是 Chrome 59 中的新功能。

亮點

新功能

CSS 和 JS 代碼覆蓋率

通過新增的覆蓋率面板來發現未使用的 CSS 與 JS 代碼。頁面或代碼加載後,此面板內會告訴你哪些代碼未使用,哪些又是使用了的。這樣可以精簡掉未使用的代碼來減小頁面的大小。

The Coverage tab
圖 1 。代碼覆蓋率面板

在URL上點擊將會在源代碼面板中顯示哪些代碼行被使用。

A breakdown of code coverage in the Sources panel
圖 2. 源代碼面板中代碼覆蓋率的分析

每行代碼都是有顏色的:

  • 青色代表那代碼已使用。
  • 紅色代表那代碼未使用。
  • 一行紅色和綠色的代碼(就像圖2的第三行Figure 2),是代表只有部分的代碼已使用。 例如:三元表達式的代碼:var b = (a > 0) ? a : 0是紅色和綠色。

要打開覆蓋率面板

  1. 呼出命令面板
  2. 輸入 Coverage 然後選擇 Show Coverage

完整的頁面截圖

觀看以下視頻來了解如何截取頁面的完整快照,從頂部一直滾動到頁面最底那種截圖。

禁用請求

想看看當某些腳本、樣式文件缺少或者其他資源加載失敗時,網頁的樣子嗎?在網絡面闆對某條請求右擊選擇 Block Request URL。一個新的 禁用請求 面板會被呼出,在這裡可以管理被禁用的請求。

Block Request URL
圖 3。禁用請求

調試 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) 呼出的文件打開菜單面板進行了合併。

傳送您對下列選項的寶貴意見...

這個網頁