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

模擬視覺障礙

開啟「算繪」分頁，並使用新的模擬視覺缺陷功能，以改善模型效能 瞭解不同類型的視覺障礙者如何運用您的網站。

模擬模糊的視力。

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

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

這些色彩對比度較低，而且較為常見。 舉例來說，「protanomaly」是降低紅光的靈敏度 (相較於「protanopia」， 是無法察覺的紅色指示燈)。但這些「-Omaly」視覺障礙 無法明確定義：有這類缺陷的人各不相同，而且可能會看到某些事物 以便增加或減少相關色彩。

我們在設計中使用更多開發人員工具中極端的模擬作業後，即可確保網頁應用程式 紅色弱、綠色弱、三弱和全原的民眾都能輕鬆取得。

請提供意見至 Chromium 問題 #1003700，或進一步瞭解實作詳情。

模擬語言代碼

你現在可以前往「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 偵錯工具的一致性 (通常會有顏色中斷點)，並讓使用者更容易區分位於 內容。

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

查看設有特定 Cookie 路徑的網路要求

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

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

使用指令選單固定於左側

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

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

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

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

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

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

開發人員工具和 Lighthouse 團隊經常收到網頁程式開發人員的意見回饋 該工具可以從開發人員工具中執行 Lighthouse，但試用這項工具時 找不到「Lighthouse」面板，因此「Audits」面板現在是「Lighthouse」面板。

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

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

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

更新長時間工作 UI

長工作是 JavaScript 程式碼，可長時間將主執行緒單調，藉此產生網路 凍結頁面。

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

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

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

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

在「資訊清單」中，啟用新的「僅顯示可遮蓋圖示的最小安全區域」核取方塊 窗格，檢查可遮蓋圖示在 Android Oreo 裝置上是否正常顯示。查看「我是我的 圖示？，即可瞭解詳情。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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