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

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. 按一下「重新載入」圖示 重新載入。DevTools 重新載入網頁，並記錄使用的代碼與出貨金額之間的比較。

  4. 按一下「Export」圖示 匯出 以匯出 匯出成 JSON 檔案

你也可以在 Puppeteer 中使用程式碼涵蓋率功能，開發人員工具是 DevTools 維護的瀏覽器自動化工具 。請參閱「涵蓋範圍」。

請參閱 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. 在「設定」下 >偏好設定 >「Sources」(來源) 會啟用「程式碼折疊」。

如何摺疊程式碼區塊：

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

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

「訊息」分頁

「Frames」分頁已重新命名為「Messages」分頁。這個分頁僅適用於 Network 面板：檢查網路通訊端連線。

「訊息」分頁

圖 21.「訊息」分頁

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

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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