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」。導覽匣中會彈出新的「Request 封鎖」分頁，可讓您管理已封鎖的要求。

封鎖要求網址

不對勁，等上去吧

一直以來，嘗試按照下列程式碼片段編寫程式碼並不容易。您正處於 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」選單時，您會發現指令的前面加上大於字元 (>)。這是因為指令選單已與「Open File」選單整合，也就是 Command + O (Mac) 或 Control + O (Windows、Linux)。

下載預覽頻道

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

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

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

  • 歡迎透過 crbug.com 提出建議或意見。
  • 在開發人員工具中，依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具問題」，回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google 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