The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

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