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

Kayce Basques

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

重點特色

新功能

CSS 和 JS 程式碼涵蓋率

你也可以透過全新的「涵蓋範圍」分頁，尋找未使用的 CSS 和 JS 程式碼。載入或執行網頁時，分頁會告訴您使用了多少程式碼，以及載入了多少程式碼。光是運送所需的程式碼，就能縮減網頁大小。

「涵蓋範圍」分頁

點選網址即可在「Sources」面板中顯示該檔案，並詳細列出執行的幾行程式碼。

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

每一行會以不同顏色標示：

  • 綠色實線代表執行的程式碼行。
  • 紅色指示燈代表未執行。
  • 如果有一行紅色和綠色的程式碼 (例如上方螢幕截圖中的第 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);
  }

附註：想提升您的偵錯技能嗎？查看下列新文件：

異動

整合式指令選單

現在開啟指令選單時，您會發現指令的前面會加上大於的字元 (>)。這是因為指令選單與「Open File」選單整合，也就是 Command + O (Mac) 或 Control + O (Windows、Linux)。

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

使用下列選項，討論文章的新功能和異動，以及其他與開發人員工具相關的事項。

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Chrome 80 版

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59