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

Kayce Basques

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

特色

• CSS 和 JS 程式碼涵蓋率。使用新的「涵蓋率」分頁找出未使用的 CSS 和 JS。
• 全頁螢幕截圖。擷取 從檢視區頂端到底部。
• 封鎖要求。在「網路」面板中手動停用個別要求。
• Step over async wait。可預測地逐步執行非同步函式。
• 統一指令選單。透過全新統合的「指令」選單執行指令及開啟檔案。

新功能

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);
  }

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

• 開始對 JS 進行偵錯
• 使用中斷點暫停程式碼
• JS 偵錯參考資料

異動

統一指令選單

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

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

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

• 歡迎透過 crbug.com 提出建議或意見。
• 在開發人員工具中，依序按一下「更多選項」「說明」>「回報開發人員工具的問題」，即可回報開發人員工具的問題。
• 請在 Twitter 上傳送訊息給 @ChromeDevTools。
• 歡迎分享開發人員工具 YouTube 新功能或開發人員工具秘訣 YouTube 影片留言。

開發人員工具新功能

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