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

Kayce Basques

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

這些版本資訊的影片版本

記錄點

使用記錄點將訊息記錄到控制台，不必在程式碼中加入 console.log() 呼叫，讓程式碼保持簡潔。

如何新增記錄點：

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

   

   圖 1. 新增記錄點

2. 選取「新增記錄點」。系統會彈出「中斷點編輯器」。

   

   圖 2. 中斷點編輯器

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

   

   圖 3. 輸入記錄點運算式

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

4. 按下 Enter 鍵或點選「中斷點編輯器」以外的位置，即可儲存。行號上方的橘色徽章代表記錄點。

   

   圖 4. 第 174 行的橘色記錄點徽章

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

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

如要回報錯誤或提供改善建議，請參閱 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. 按一下「匯出」，將資料匯出為 JSON 檔案。

您也可以在 Puppeteer 中使用程式碼涵蓋率，這是由開發人員工具團隊維護的瀏覽器自動化工具。請參閱涵蓋範圍。

如要回報錯誤或提供改善建議，請參閱 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 線 (底部)

兩條線之間的顏色代表符合 AA 建議，但不符合 AAA 建議的顏色。如果某種顏色符合 AAA 建議，則該顏色同一側的任何顏色也符合建議。舉例來說，在圖 15 中，下線以下的所有內容都是 AAA，而上線以上的所有內容甚至不符合 AA 建議。

提示！一般來說，只要增加符合 AAA 建議的文字量，就能提升網頁的可讀性。如果基於某些原因無法達到 AAA 建議，請盡量達到 AA 建議。

如要瞭解如何使用這項功能，請參閱「色彩挑選器中的對比度」。

如要回報錯誤或提供改善建議，請參閱 Chromium 問題 #879856。

儲存自訂地理位置覆寫

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

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

   

   圖 16. 指令選單

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

   

   圖 17. 「感應器」分頁

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

   

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

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

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

   

   圖 19。新增自訂地理位置

如要回報錯誤或提供改善建議，請參閱 Chromium 問題 #649657。

程式碼折疊

「來源」和「網路」面板現在支援程式碼摺疊。

圖 20. 第 54 到 65 行已摺疊

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

1. 按下 F1 開啟「設定」。
2. 依序前往「設定」 >「偏好設定」 >「來源」，然後啟用「程式碼摺疊」。

如要摺疊程式碼區塊：

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

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

「訊息」分頁

「Frames」(影格) 分頁已重新命名為「Messages」(訊息) 分頁。檢查 WebSocket 連線時，只有在「網路」面板中才會顯示這個分頁。

圖 21. 「訊息」分頁

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

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。