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

Kayce Basques

模擬視覺障礙人士

開啟「轉譯」分頁，並使用全新的「模擬視覺障礙」功能，進一步瞭解各種視覺障礙人士如何使用您的網站。

正在模擬模糊的視力。

正在模擬模糊的視力。

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

  • 紅色弱視：無法察覺任何紅燈。
  • 綠色弱視：無法察覺任何綠光。
  • 藍色盲：無法辨識任何藍光。
  • 全色盲：無法辨認任何顏色，但灰色陰影除外 (極罕見)。

存在較不嚴重的色彩視覺障礙者，事實上這些色彩較常見。舉例來說，紅色弱視降低了對紅光的敏感度 (不同於「紅色盲」，後者代表紅光完全無法察覺)。然而，這些「非異常」視覺障礙並沒有明確定義：每位視力障礙的人都不同，看到的內容也可能不同 (能夠感受到更多/較少相關顏色)。

藉由在開發人員工具中設計更極端的模擬後，您的網頁應用程式也保證可供隨機、綠色弱視、藍色弱視和摺香的使用者存取。

請針對 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) 偵錯

「網路」面板現在提供「跨來源嵌入程式政策」偵錯資訊。

「Status」欄現在會簡要說明要求遭到封鎖的原因，並提供查看該要求標頭的連結，以利進一步偵錯：

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

「Headers」分頁的「Response Headers」區段提供進一步的解決問題指引：

「回應標頭」一節中的更多指引

請向 Chromium 問題 #1051466 提供意見。

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

「Sources」面板包含中斷點、條件式中斷點和記錄點的新圖示：

新圖示的動機是要讓 UI 與其他 GUI 偵錯工具 (通常色彩中斷點為紅色) 更加一致，且更容易快速區分 3 項功能。

請向 Chromium 問題 #1041830 提供意見。

在「Network」面板中使用新的 cookie-path 篩選器關鍵字，專注於設定特定 Cookie 路徑的網路要求。

請參閱「依房源篩選要求」一文，發掘更多特殊關鍵字，例如 cookie-path。

從指令選單向左放置

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

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

請向 Chromium 問題 #1011679 提供意見。

「主選單」中的 Settings 選項已移動

現在可在「更多工具」下方找到從「主選單」開啟「設定」的選項。

已開啟「主選單」，並顯示聚焦於「設定」的「更多工具」

請向 Chromium 問題 #1050855 提供意見。

「Audits」面板現已改為「Lighthouse」面板

開發人員工具和 Lighthouse 團隊經常收到網頁開發人員的意見回饋，指出可透過開發人員工具執行 Lighthouse，但試用它後卻找不到「Lighthouse」面板，因此稽核面板現在變成 Lighthouse 面板。

Lighthouse 面板

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

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

刪除所有覆寫項目

請向 Chromium 問題 #1016501 提供意見。

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

「長時間工作」是指會長時間套用主執行緒的 JavaScript 程式碼，造成網頁凍結。

您目前已可以在「Performance」(效能) 面板以視覺化方式呈現長時間工作，但已在 Chrome 83 版中更新「效能」面板的「長工作」視覺化使用者介面。系統現在以條紋的紅色背景來標示任務的「Long Task」部分。

新版 Long Task UI

請向 Chromium 問題 #1054447 提供意見。

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

Android Oreo 推出了自動調整圖示，可在各種裝置型號上以各種形狀顯示應用程式圖示。「可遮蓋的圖示」是全新的圖示格式，可支援自動調整圖示，可讓您確保 PWA 圖示在支援可遮蓋的圖示標準的裝置上看起來良好。

勾選「Manifest」窗格中新增的「Show only the maskable icon for maskable icon」(顯示可遮蓋圖示最小安全區域) 核取方塊，以檢查可遮蓋的圖示在 Android Oreo 裝置上是否良好。詳情請參閱「我目前的圖示是否已準備就緒？」一節。

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

下載預覽管道

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