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

以下是 Chrome 73 版開發人員工具的新功能。

這些版本資訊的影片版本

記錄點

使用 Logpoints 將訊息記錄到主控台,而不會因為 console.log() 呼叫而使程式碼雜亂。

如要新增記錄點,請按照下列步驟操作:

  1. 在要新增記錄點的行號上按一下滑鼠右鍵。

    新增記錄點

    圖 1. 新增記錄點

  2. 選取「新增記錄點」。系統隨即會彈出「Breakpoint Editor」

    中斷點編輯器

    圖 2. 中斷點編輯器

  3. 在「中斷點編輯器」中,輸入要記錄至控制台的運算式。

    輸入 Logpoint 運算式

    圖 3. 輸入 Logpoint 運算式

    提示!登出變數 (例如 TodoApp) 時,請將變數包裝在物件 (例如 {TodoApp}) 中,以便在控制台中登出其名稱和值。如要進一步瞭解這個語法,請參閱「一律記錄物件」和「物件屬性值簡寫語法」。

  4. 按下 Enter 鍵或點選「斷點編輯器」以外的位置即可儲存。行號頂端的橘色徽章代表 Logpoint。

    第 174 行上的橘色「Logpoint」徽章

    圖 4. 第 174 行上的橘色「Logpoint」徽章

下次執行這行程式碼時,開發人員工具會將 Logpoint 運算式的結果記錄到控制台。

主控台中 Logpoint 運算式的結果

圖 5:主控台中 Logpoint 運算式的結果

請參閱 Chromium 問題 #700519 回報錯誤或提出改善建議。

檢查模式中的詳細工具提示

檢查節點時,DevTools 現在會顯示已展開的工具提示,其中包含常見的重要資訊,例如字型大小、字型顏色、對比度比率和方塊模型尺寸。

檢查節點

圖 6. 檢查節點

如何檢查節點:

  1. 按一下「檢查」圖示 檢查節點

    提示!將滑鼠游標懸停在「Inspect」上,即可查看鍵盤快速鍵。

  2. 在可視區域中,將滑鼠游標懸停在節點上。

匯出程式碼涵蓋率資料

程式碼涵蓋率資料現在可以匯出為 JSON 檔案。JSON 如下所示:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url 是 DevTools 分析的 CSS 或 JavaScript 檔案網址。ranges 會說明程式碼的哪些部分已使用。start 是所用範圍的起始偏移量。end 是結束位移。text 是檔案的完整文字。

在上述範例中,0 到 21 的範圍對應至 body { margin: 1em; },45 到 67 的範圍則對應至 h1 { color: #317EFB; }。換句話說,系統使用了第一和最後一個規則集,但沒有使用中間的規則集。

如要分析網頁載入作業中使用的程式碼量,並匯出資料,請按照下列步驟操作:

  1. 按下 Control + Shift + P 鍵或 Command + Shift + P 鍵 (Mac),即可開啟指令選單。

    指令選單

    圖 7. 指令選單

  2. 開始輸入 coverage,選取「顯示涵蓋範圍」,然後按下 Enter 鍵。

    顯示涵蓋率

    圖 8. 顯示涵蓋率

    系統會開啟「涵蓋範圍」分頁。

    「涵蓋率」分頁

    圖 9. 「涵蓋率」分頁

  3. 按一下「重新載入」圖示 重新載入。開發人員工具會重新載入網頁,並記錄使用多少程式碼與運送多少程式碼的比較結果。

  4. 按一下「Export」匯出,即可將資料匯出為 JSON 檔案。

程式碼涵蓋率也適用於 Puppeteer,這是由 DevTools 團隊維護的瀏覽器自動化工具。請參閱「涵蓋率」。

請參閱 Chromium 問題 #717195 回報錯誤或提出改善建議。

使用鍵盤操作控制台

您現在可以使用鍵盤瀏覽控制台。以「Black cat ate the mouse」

按下 Shift + Tab 鍵,即可將焦點移至最後一個訊息 (或已評估的運算式結果)。如果訊息包含連結,系統會先醒目顯示最後一個連結。按下 Enter 鍵即可在新分頁中開啟連結。按下「Left」箭頭鍵,即可醒目顯示整個訊息 (請參閱圖 13)。

聚焦連結

圖 11. 聚焦連結

按下「向上」箭頭鍵,即可將焦點移至下一個連結。

聚焦其他連結

圖 12. 聚焦其他連結

再次按向上鍵可將焦點聚焦在整個訊息上。

將焦點移至整則訊息

圖 13. 將焦點移至整則訊息

按下「右」鍵可展開收合的堆疊追蹤 (或物件、陣列等)。

展開已收合的堆疊追蹤

圖 14.展開已收合的堆疊追蹤

按下「左」箭頭鍵,即可收合已展開的訊息或結果。

請參閱 Chromium 問題 #865674 回報錯誤或提出改善建議。

顏色挑選器中的 AAA 對比度線

顏色挑選器現在會顯示第二條線,指出哪些顏色符合 AAA 對比度建議。AA 行自 Chrome 65 起就已存在。

AA 線 (頂端) 和 AAA 線 (底部)

圖 15.AA 線 (頂端) 和 AAA 線 (底部)

2 條線之間的顏色代表符合 AA 建議,但不符合 AAA 建議的顏色。當某種顏色符合 AAA 建議時,該顏色同側的任何顏色也都符合建議。舉例來說,在圖 15中,低於下方線的項目為 AAA,高於上方線的項目甚至不符合 AA 建議。

提示!一般來說,只要增加符合 AAA 建議的文字量,就能改善網頁的可讀性。如果您無法滿足 AAA 建議,請至少滿足 AA 建議。

如要瞭解如何存取這項功能,請參閱「色彩挑選器中的對比率」。

請參閱 Chromium 問題 #879856 回報錯誤或提出改善建議。

儲存自訂地理位置覆寫值

您現在可以在「感應器」分頁中儲存自訂地理位置覆寫值。

  1. 按下 Control + Shift + P 鍵或 Command + Shift + P 鍵 (Mac),即可開啟指令選單。

    指令選單

    圖 16. 指令選單

  2. 輸入 sensors,選取「Show Sensors」,然後按下 Enter 鍵。系統會開啟「感應器」分頁。

    「感應器」分頁

    圖 17. 「感應器」分頁

  3. 在「地理位置」部分,按一下「管理」。依序開啟「設定」 >「地理位置」

    「設定」中的「地理位置」分頁

    圖 18. 「設定」中的「地理位置」分頁

  4. 按一下「新增營業地點」

  5. 輸入位置名稱、緯度和經度,然後按一下「新增」

    新增自訂地理位置

    圖 19。新增自訂地理位置

請參閱 Chromium 問題 #649657 回報錯誤或提出改善建議。

程式碼折疊

「Sources」和「Network」面板現在支援程式碼折疊功能。

已折疊第 54 到 65 行

圖 20. 已折疊第 54 到 65 行

如要啟用程式碼折疊功能,請按照下列步驟操作:

  1. 按下 F1 鍵開啟「設定」
  2. 依序前往「設定」 >「偏好設定」 >「來源」,然後啟用「Code folding」

如要收合程式碼區塊:

  1. 將滑鼠游標懸停在區塊開始的列號上。
  2. 按一下「折疊」圖示 收合

請參閱 Chromium 問題 #328431 回報錯誤或提出改善建議。

「訊息」分頁

「Frames」分頁已重新命名為「Messages」分頁。只有在檢查 Web Sockets 連線時,這個分頁才會顯示在「Network」面板中。

「訊息」分頁

圖 21。「訊息」分頁

請參閱 Chromium 問題 #802182 回報錯誤或提出改善建議。

下載預覽管道

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

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。