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

Kayce Basques

模擬視覺障礙人士看到的內容

開啟「算繪」分頁，並使用全新的「模擬視力障礙」功能，進一步瞭解不同類型的視力障礙使用者如何體驗您的網站。

模擬視力模糊人士看到的內容。

模擬視力模糊人士看到的內容。

DevTools 可以模擬模糊視覺效果，以及下列色覺辨認障礙類型：

  • 紅色盲：無法辨識任何紅光。
  • 綠色盲：無法辨識任何綠光。
  • 藍色盲：無法辨識任何藍光。
  • 全色盲：除了灰階以外，無法辨識任何顏色 (極為罕見)。

這些色覺辨認障礙也有較不嚴重的版本，而且其實更常見。舉例來說，紅色弱視是指對紅光的敏感度降低 (與紅色盲相反，後者是指完全無法感知紅光)。不過，這些「-omaly」視覺缺陷的定義並不明確：每位有此視覺缺陷的人情況不同，可能會以不同方式看待事物 (能夠感知更多/更少的相關顏色)。

在 DevTools 中設計更極端的模擬功能，可確保您的網頁應用程式可供紅綠色弱、藍綠色弱、三色弱和全色盲人士使用。

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

模擬語言代碼

您現在可以在「Sensors」 >「Location」中設定位置，模擬語言代碼。開啟「指令選單」，然後輸入 Sensors 即可存取「感應器」分頁。執行這些動作後，DevTools 會修改目前的預設語言代碼，影響下列項目：

  • 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) 偵錯

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

「狀態」欄現在會快速說明為何封鎖要求，並提供連結，方便您查看該要求的標頭，以便進一步偵錯：

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

「Headers」分頁標籤的「Response Headers」部分會提供更多解決問題的相關指引：

請參閱「回應標頭」一節的更多指引

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

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

「Sources」面板有新的圖示，用於表示中斷點、條件中斷點和記錄點：

新圖示的動機在於讓 UI 與其他 GUI 偵錯工具 (通常會將中斷點標示為紅色) 保持一致，並讓使用者一眼就能分辨這 3 項功能。

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

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

請參閱「依屬性篩選要求」，瞭解更多特殊關鍵字，例如 cookie-path。

在指令選單中選擇「Dock 至左側」

開啟「指令」選單，並執行 Dock to left 指令，將 DevTools 移至檢視區的左側。

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

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

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

從「主選單」開啟「設定」的選項，現在已移至「更多工具」下方。

開啟「Main Menu」，並將「More Tools」設為「Settings」

請提供意見回饋至 Chromium 問題 #1050855。

「稽核」面板現已改為「Lighthouse」面板

開發人員工具和 Lighthouse 團隊經常收到網站開發人員的意見回饋，表示他們聽說可以透過開發人員工具執行 Lighthouse，但實際嘗試時卻找不到「Lighthouse」面板，因此「稽核」面板現在已改名為「Lighthouse」面板。

Lighthouse 面板

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

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

刪除所有覆寫值

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

已更新的長時間執行工作 UI

長時間工作是指會長時間獨佔主執行緒的 JavaScript 程式碼，導致網頁凍結。

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

全新的長時間執行工作 UI

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

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

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

在「Manifest」窗格中啟用新的「Show only the minimum safe area for maskable icons」核取方塊，確認可遮蓋圖示在 Android Oreo 裝置上顯示良好。如需瞭解詳情，請參閱「目前的圖示是否已就緒？」一文。

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

下載預覽管道

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

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。