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

Kayce Basques

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

這些版本資訊的影片版本

記錄點

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

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

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

   

   圖 1. 新增記錄點

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

   

   圖 2. 中斷點編輯器

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

   

   圖 3. 輸入記錄點運算式

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

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

   

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

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

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

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

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

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

圖 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 是 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 鍵即可在新分頁中開啟連結。按下「左」箭頭鍵，即可醒目顯示整個訊息 (請參閱圖 13)。

圖 11. 聚焦連結

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

圖 12. 聚焦其他連結

再次按向上鍵可將焦點移至整個訊息。

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

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

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

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

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

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

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

圖 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」面板現在支援程式碼折疊功能。

圖 20. 第 54 到 65 行已摺疊

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

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

如何收合程式碼區塊：

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

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

「訊息」分頁

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

圖 21。「訊息」分頁

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

下載預覽管道

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

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

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

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「更多選項」>「說明」>「回報開發人員工具的問題」，然後使用 more_vert 回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 歡迎留言分享開發人員工具 YouTube 新功能或開發人員工具秘訣 YouTube 影片。

開發人員工具新功能

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