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

Kayce Basques

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

這些版本資訊的影片版本

記錄點

使用記錄點將訊息記錄到控制台，且 console.log() 呼叫不會造成程式碼雜亂。

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

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

    新增記錄點

    圖 1：新增記錄點

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

    中斷點編輯器

    圖 2：中斷點編輯器

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

    輸入記錄點運算式

    圖 3：輸入記錄點運算式

    提示！登出變數 (例如 TodoApp) 時，將變數納入物件 (例如 {TodoApp}) 中，即可登出其名稱和值在主控台中。如要進一步瞭解這個語法，請參閱一律記錄物件和物件屬性值簡寫。

  4. 按下 Enter 鍵，或在中斷點編輯器以外的位置按一下即可儲存。行數頂端的橘色徽章代表記錄點。

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

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

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

控制台中記錄點運算式的結果

圖 5：控制台中記錄點運算式的結果

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

檢查模式的詳細工具提示

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

檢查節點

圖 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 是開發人員工具分析的 CSS 或 JavaScript 檔案的網址。ranges 說明使用的程式碼部分。start 是在所用範圍的起始偏移值。end 是結束位移。text 是檔案的完整文字。

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

如要分析網頁載入時使用多少程式碼，並匯出資料：

  1. 按下 Control + Shift + P 鍵或 Command + Shift + P 鍵 (Mac)，開啟「Command」選單。

    指令選單

    圖 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 開始，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)，開啟「Command」選單。

    指令選單

    圖 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. 按一下「Fold」圖示 折疊。

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

訊息分頁

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

「訊息」分頁

圖 21. 「訊息」分頁

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

下載預覽管道

考慮使用 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