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

Kayce Basques

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

特色

新功能

CSS 和 JS 程式碼涵蓋率

透過全新的「涵蓋率」分頁，找出未使用的 CSS 和 JS 程式碼。載入或執行網頁時，這個分頁會顯示已使用的程式碼數量，以及已載入的程式碼數量。只要傳送所需程式碼，即可縮減網頁大小。

「涵蓋率」分頁

點選網址後，系統會在「來源」面板中顯示該檔案，並列出執行的程式碼行。

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

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

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

如要開啟「涵蓋範圍」分頁，請按照下列步驟操作：

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

全頁螢幕截圖

請觀看下方影片，瞭解如何擷取頁面頂端至底部的螢幕截圖。

封鎖要求

想瞭解在無法使用特定指令碼、樣式表或其他資源時，網頁的行為表現如何嗎？在「Network」面板中找出要封鎖的要求，然後按一下滑鼠右鍵，並選取「Block Request URL」。新的「要求封鎖」分頁會在側欄彈出，方便您管理遭封鎖的要求。

封鎖要求網址

跳過非同步等待

一直以來，嘗試按照下列程式碼片段編寫程式碼並不容易。您會在 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);
  }

P.S. 想提升偵錯技巧嗎？請查看這些較新的文件：

異動

統一指令選單

當您現在開啟指令選單時，請注意指令前面會加上大於字元 (>)。這是因為指令選單已與「開啟檔案」選單合併，開啟檔案選單的鍵盤指令為 Command+O (Mac)，或 Control+O (Windows、Linux)。

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。