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

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

開啟「算繪」分頁，然後使用新的「模擬視力缺陷」功能，進一步瞭解不同視力缺陷類型的使用者瀏覽網站時的體驗。

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

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

• 紅色盲：無法辨識任何紅光。
• 綠色盲：無法辨識任何綠光。
• 藍色盲：無法感知任何藍光。
• 全色盲：無法辨識任何顏色，只能看到灰階色調 (極為罕見)。

色覺辨認障礙有程度較輕微的版本，而且其實更常見。 舉例來說，紅色弱視是指對紅光的感應能力降低 (相較於紅色盲，後者是完全無法感知紅光)。不過，這些「-omaly」視力缺陷的定義並不清楚：每個有這類視力缺陷的人都不一樣，看到的東西可能也不同 (能夠感知更多/更少的相關顏色)。

在開發人員工具中設計更極端的模擬情境，確保網頁應用程式也能供有紅綠色盲、綠色盲、藍黃色盲和全色盲的使用者存取。

請在 Chromium 問題 #1003700 中提供意見，或進一步瞭解實作方式。

模擬語言代碼

您現在可以依序前往「感應器」 >「位置」設定位置，模擬地區。開啟指令選單，然後輸入 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) 偵錯

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

「狀態」欄現在會簡要說明要求遭封鎖的原因，並提供連結，方便您查看該要求標頭，進一步進行偵錯：

「Headers」分頁的「Response Headers」部分提供更多指引，協助您解決問題：

請透過 Chromium 問題 #1051466 提供意見。

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

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

• 中斷點 會以紅色圓圈表示。
• 條件中斷點 會以半紅半白的圓圈表示。
• 記錄點 會以紅色圓圈和控制台圖示表示。

新圖示的設計動機是為了讓 UI 與其他 GUI 偵錯工具更加一致 (通常會將中斷點標示為紅色)，並讓使用者更容易一眼區分這 3 項功能。

請透過 Chromium 問題 #1041830 提供意見。

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

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

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

從指令選單中選取「向左停駐」

開啟指令選單，然後執行 Dock to left 指令，將開發人員工具移至檢視區塊左側。

請透過 Chromium 問題 #1011679 提供意見。

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

現在可以從「更多工具」開啟「設定」。

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

「稽核」面板現在是「Lighthouse」面板

開發人員經常向開發者工具和 Lighthouse 團隊回報，他們聽說可以從開發者工具執行 Lighthouse，但實際操作時卻找不到「Lighthouse」面板，因此「稽核」面板現在已改名為「Lighthouse」面板。

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

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

請透過 Chromium 問題 #1016501 提供意見。

更新長時間執行的工作 UI

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

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

請透過 Chromium 問題 #1054447 提供意見。

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

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

在「資訊清單」窗格中啟用新的「僅顯示可遮蓋圖示的最小安全區域」核取方塊，確認可遮蓋圖示在 Android Oreo 裝置上顯示正常。如要瞭解詳情，請參閱「目前的圖示是否已準備就緒？」一文。

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先版管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前，找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見或要求新功能，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。