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

Kayce Basques

模擬視覺障礙

開啟「算繪」分頁，並使用新的「Emulate 視覺缺陷」功能，進一步瞭解不同類型視覺障礙的使用者如何體驗你的網站。

模擬模糊的視力。

模擬模糊的視力。

開發人員工具可以模擬模糊的視覺，以及下列色彩視覺障礙類型：

  • 紅色弱：無法感知任何紅色指示燈，
  • 綠色弱：無法感知任何綠燈。
  • 藍色弱：無法感知任何藍燈，
  • 色盲：無法辨別任何顏色，但灰色 (極少數) 除外。

這些色彩視覺缺陷的極端版本存在，但實際上較為常見。例如，「protanomaly」是降低紅光的敏感度，而「protanopia」是完全無法感知紅光的能力。不過，這些「-不見」的視覺缺陷並未明確定義：有這種缺陷的每個人各不相同，他們看到的事物也可能有所差異 (更容易察覺到關聯性的色彩)。

我們在開發開發人員工具中採用更極端的模擬作業後，就保證讓有明顯、綠色弱、藍色弱和極原的人士能存取網頁應用程式。

請將意見回饋傳送給 Chromium 問題 #1003700，或進一步瞭解實作方式。

模擬語言代碼

你現在可以依序前往「Sensors」 >「Location」設定位置，藉此模擬語言代碼。開啟「Command Menu」(指令選單) 並輸入 Sensors，即可存取「Sensors」(感應器) 分頁。執行這些動作後，開發人員工具會修改目前的預設語言代碼，這會影響下列項目：

  • Intl.* API，例如 new Intl.NumberFormat().resolvedOptions().locale
  • 其他可辨識語言代碼的 JavaScript API，例如 String.prototype.localeCompare 和 *.prototype.toLocaleString，例如 123_456..toLocaleString()
  • DOM API，例如 navigator.language 和 navigator.languages
  • Accept-Language HTTP 要求標頭

歡迎查看各語言代碼的程式碼範例，親自試用。

請提供意見至 Chromium 問題 #1051822。

跨來源嵌入程式政策 (COEP) 偵錯

Network 面板現在提供跨來源嵌入器政策偵錯資訊。

「狀態」欄現在可快速說明要求遭到封鎖的原因，以及查看該要求標頭的連結，以便進一步偵錯：

「狀態」欄中的已封鎖要求

「Headers」分頁的「Response Headers」部分提供更多關於如何解決問題的指南：

「回應標頭」一節提供更多指引

請將意見回饋傳送至 Chromium 問題 #1051466。

中斷點、條件中斷點和記錄點的新圖示

「來源」面板為中斷點、條件中斷點和記錄點提供新的圖示：

新圖示的用意是要讓 UI 與其他 GUI 偵錯工具更一致 (通常以紅色顯示中斷點)，並且讓使用者一眼就能分辨這 3 項功能。

請將意見回饋傳送至 Chromium 問題 #1041830。

在「Network」(網路) 面板中使用新的 cookie-path 篩選器關鍵字，將焦點放在設有特定 Cookie 路徑的網路要求。

查看依資源篩選請求一文，找出更多特殊關鍵字 (例如 cookie-path)。

使用指令選單固定於左側

開啟「Command」選單並執行 Dock to left 指令，將開發人員工具移至檢視區左側。

開發人員工具已固定至可視區域左側

請將意見回饋傳送至 Chromium 問題 #1011679。

「主選單」中的 Settings 選項已移至他處

在「主選單」中開啟「設定」選項，現在會顯示在「更多工具」下方。

開啟了「主選單」，其中「更多工具」著重於「設定」

請將意見回饋傳送至 Chromium 問題 #1050855。

「稽核」面板現已變更為「Lighthouse」面板

開發人員工具和 Lighthouse 團隊經常收到網頁開發人員的意見回饋，表示他們可以透過開發人員工具執行 Lighthouse，但在試用時找不到「Lighthouse」面板，因此「Audits」面板現在已更名為「Lighthouse」面板。

Lighthouse 面板

刪除資料夾中的所有本機覆寫值

設定本機覆寫後，您現在可以在資料夾上按一下滑鼠右鍵，然後選取新的「Delete all override」(刪除所有覆寫項目) 選項，即可刪除該資料夾中的所有本機覆寫值。

刪除所有覆寫項目

請將意見回饋傳送至 Chromium 問題 #1016501。

更新長時間工作 UI

「Long Task」是 JavaScript 程式碼，可長時間將主執行緒單調，導致網頁凍結。

您已經在效能面板中以視覺化方式呈現長時間工作，但在 Chrome 83 中，「效能」面板的「長時間工作」視覺化 UI 已經更新。工作的「長按」部分現在會以紅色條紋背景標示。

全新的「長時間工作」使用者介面

請將意見回饋傳送至 Chromium 問題 #1054447。

資訊清單窗格中的可遮蓋圖示支援功能

Android Oreo 導入了自動調整圖示，可在不同裝置型號上以各種形狀顯示應用程式圖示。可遮蓋圖示是支援自動調整圖示的新圖示格式，可確保 PWA 圖示在支援可遮蓋圖示標準的裝置上正常顯示。

在「Manifest」窗格中啟用新的「Show only the min the min of Safe area for maskable」(顯示可遮蓋圖示的最低安全區域) 核取方塊，檢查可遮蓋的圖示在 Android Oreo 裝置上是否正常顯示。如要瞭解詳情，請查看「我目前的圖示已準備好了嗎？」。

[僅顯示可遮蓋圖示的最小安全區域] 核取方塊

下載預覽頻道

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