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

Kayce Basques
Kayce Basques

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

這些版本資訊的影片版本

記錄點

使用記錄點將訊息記錄至主控台，不會藉由 console.log() 呼叫清理程式碼。

如何新增記錄點：

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

    新增記錄點

    圖 1：新增記錄點

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

    Breakpoint 編輯器

    圖 2：Breakpoint 編輯器

  3. 在「Breakpoint Editor」中，輸入要記錄至控制台的運算式。

    輸入記錄點運算式

    圖 3：輸入記錄點運算式

    小提示：登出變數 (例如 TodoApp) 時，只要將變數納入物件 (例如 {TodoApp}) 中，即可在控制台中登出該變數的名稱和值。如要進一步瞭解這個語法，請參閱「一律記錄物件」和「物件屬性值簡短」。

  4. 按下 Enter 鍵，或按一下 Breakpoint 編輯器以外的地方進行儲存。行號頂端的橘色徽章代表記錄點。

    第 174 行顯示橘色記錄點徽章

    圖 4 第 174 行顯示橘色記錄點徽章

下次執行程式碼行時，開發人員工具會將記錄點運算式的結果記錄到主控台。

控制台中 Logpoint 運算式的結果

圖 5：控制台中 Logpoint 運算式的結果

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

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

現在檢查節點時，開發人員工具會顯示展開的工具提示，當中包含常見的重要資訊，例如字型大小、字型顏色、對比度和方塊模型維度。

檢查節點

圖 6：檢查節點

如何檢查節點：

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

    小提示：將滑鼠遊標懸停在「檢查」上，即可查看鍵盤快速鍵。

  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 是開發人員工具分析的 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 中找到程式碼涵蓋率，這是開發人員工具團隊維護的瀏覽器自動化工具。請參閱「涵蓋範圍」。

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

使用鍵盤瀏覽控制台

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

按下 Shift + Tab 鍵，將焦點移至最後一則訊息 (或評估運算式的結果)。如果郵件包含連結，系統會先將最後一個連結醒目顯示。按下 Enter 鍵，即可在新分頁開啟連結。按下向左鍵會醒目顯示整封郵件 (請參閱圖 13)。

將焦點移至連結

圖 11. 將焦點移至連結

按向上鍵可將焦點移至下一個連結。

焦點移至其他連結

圖 12. 焦點移至其他連結

再次按下向上鍵可將焦點移至整封郵件。

聚焦完整的訊息

圖 13. 聚焦完整的訊息

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

展開收合的堆疊追蹤

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

按向左鍵可收合已展開的郵件或搜尋結果。

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

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

顏色挑選器現在顯示第二行，指出哪些顏色符合 AAA 對比度建議。自 Chrome 65 版以來，Google 就有 AA 線。

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 鍵。「Sensors」(感應器) 分頁會隨即開啟。

    「感應器」分頁

    圖 17. 「感應器」分頁

  3. 在「地理位置」部分中按一下「管理」。系統隨即會開啟「設定」 >「地理位置」。

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

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

  4. 按一下「新增地區」。

  5. 輸入地點名稱、經緯度，然後按一下「新增」。

    新增自訂地理位置

    圖 19. 新增自訂地理位置

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

程式碼折疊

「Sources」(來源) 和「Network」(網路) 面板現在支援程式碼折疊功能。

第 54 到 65 行已摺疊

圖 20. 第 54 到 65 行已摺疊

如何啟用程式碼摺疊功能：

  1. 按下 F1 鍵開啟「設定」。
  2. 依序前往「Settings」 >「Preferences」 >「Sources」，即可啟用「Code folding」。

如何摺疊程式碼區塊：

  1. 將滑鼠遊標懸停在區塊開始的行號上。
  2. 按一下「摺疊」圖示 折疊。

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

「訊息」分頁

「Frames」分頁已重新命名為「Messages」分頁。只有在檢查網路通訊端連線時，「網路」面板才會顯示這個分頁。

「訊息」分頁

圖 21. 「訊息」分頁

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

下載預覽頻道

建議您使用 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