What's 開發人員工具的新功能 (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub

歡迎閱讀新一期的開發人員工具版本資訊。觀看下方影片或繼續閱讀，瞭解 Chrome 59 版 Chrome 開發人員工具的新功能！

特色

新功能

CSS 和 JS 程式碼涵蓋率

使用新的「涵蓋範圍」分頁，找出未使用的 CSS 和 JavaScript 程式碼。載入或執行網頁時，分頁會顯示已使用的程式碼量，以及載入的程式碼量。您只需要傳送所需的程式碼，即可縮減網頁大小。

「涵蓋範圍」分頁

按一下網址，即可在「來源」面板中查看該檔案，並瞭解執行了哪些程式碼行。

「來源」面板中的程式碼涵蓋率細目

每行程式碼都會以不同顏色標示：

  • 實心綠色代表該行程式碼已執行。
  • 恆亮紅燈表示未執行。
  • 如果程式碼行同時以紅色和綠色顯示 (例如上方螢幕截圖中的第 3 行)，表示該行只有部分程式碼已執行。舉例來說，var b = (a > 0) ? a : 0 這類三元運算式會同時以紅色和綠色標示。

如要開啟「涵蓋範圍」分頁標籤：

  1. 開啟指令選單。
  2. 開始輸入 Coverage，然後選取「顯示涵蓋範圍」。

整頁螢幕截圖

請觀看下方影片，瞭解如何從頁面頂端一路擷取到底部。

封鎖要求

想瞭解網頁在特定指令碼、樣式表或其他資源無法使用時的行為嗎？在「網路」面板中，對要求按一下滑鼠右鍵，然後選取「封鎖要求網址」。「抽屜」會彈出新的「要求封鎖」分頁，方便您管理遭封鎖的要求。

封鎖要求網址

跳過 async await

到目前為止，嘗試逐步執行下列程式碼片段等程式碼時，都會遇到問題。您會處於 test() 的中間，逐步執行一行程式碼，然後遭到 setInterval() 程式碼中斷。現在逐步執行 test() 等非同步程式碼時，開發人員工具會從第一行到最後一行逐步執行，且行為一致。

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  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);
  }

附註：想提升偵錯技能嗎？請參閱下列新文件：

異動

統一指令選單

現在開啟「Command Menu」(指令選單) 時，會發現指令前面加上了大於符號 (>)，這是因為「Command Menu」(指令選單) 已與「Open File」(開啟檔案) 選單合併，後者的快速鍵為 Command+O (Mac) 或 Control+O (Windows、Linux)。

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

與 Chrome 開發人員工具團隊聯絡

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。