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

Jecelyn Yeen

CSS 格線編輯器

這是許多人要求的功能。你現在可以使用全新的 CSS 格線編輯器，預覽及編寫 CSS 格線！

CSS 格線編輯器

如果網頁上的 HTML 元素套用了 display: grid 或 display: inline-grid，您會在「樣式」窗格中看到該元素旁邊出現圖示。按一下圖示即可切換 CSS 格線編輯器。您可以使用畫面上的圖示 (例如 justify-content: space-around) 預覽可能的變更，並透過單鍵操作編輯格線外觀。

Chromium 問題：1203241

支援主控台中的 const 重新宣告

除了現有的 let 和 class 重新宣告，控制台現在也支援重新宣告 const 陳述式。對於使用控制台嘗試新 JavaScript 程式碼的網頁開發人員來說，無法重新宣告是常見的惱人問題。

這可讓開發人員將程式碼複製貼上至開發人員工具控制台，以便查看程式碼的運作方式或進行實驗、對程式碼進行小幅變更，以及重複執行這個程序，而無須重新整理網頁。先前，如果程式碼重新宣告 const 繫結，開發人員工具就會擲回語法錯誤。

請參考下方範例。const 重新宣告功能支援跨不同的 REPL 指令碼 (請參閱變數 a)。請注意，系統設計不支援下列情況：

  • const 在 REPL 指令碼中不允許重新宣告網頁指令碼
  • const 不允許在同一個 REPL 指令碼中重新宣告 (請參閱變數 b)

const 重新宣告

Chromium 問題：1076427

原始碼順序檢視器

您現在可以查看畫面上的來源元素順序，以便更有效地檢查無障礙功能。

原始碼順序檢視器

HTML 文件中的內容順序對於搜尋引擎最佳化和無障礙體驗至關重要。新的 CSS 功能可讓開發人員建立在螢幕上顯示的內容與 HTML 文件中內容截然不同的內容。這會造成重大的無障礙問題，因為螢幕閱讀器使用者會獲得與視障使用者不同的體驗，而且很可能會感到困惑。

Chromium 問題：1094406

查看影格詳細資料的新捷徑

如要查看 iframe 詳細資料，請在「元素」面板中按一下 iframe 元素，然後選取「顯示框架詳細資料」。

顯示框架詳細資料

這麼做可讓您在「應用程式」面板中查看 iframe 的詳細資料，檢查文件詳細資料、安全性和隔離狀態、權限政策等，以便偵錯潛在問題。

框架詳細資料檢視畫面

Chromium 問題：1192084

強化 CORS 偵錯支援

跨源資源共享 (CORS) 錯誤現在會顯示在「問題」分頁中。有許多原因可能會導致 CORS 錯誤。點選展開每個問題，瞭解潛在原因和解決方法。

「問題」分頁中的 CORS 問題

Chromium 問題：1141824

網路面板更新

將 XHR 標籤重新命名為 Fetch/XHR

XHR 標籤現已重新命名為 Fetch/XHR。這項變更可讓您更清楚瞭解這個篩選器同時包含 XMLHttpRequest 和 Fetch API 網路要求。

Fetch/XHR 標籤

Chromium 問題：1201398

在「Network」面板中篩選 Wasm 資源類型

您現在可以按一下新的「Wasm」按鈕，篩選 Wasm 網路要求。

依 Wasm 篩選

Chromium 問題：1103638

「網路狀況」分頁中裝置的 User-Agent Client Hints

User-Agent Client Hints 現已套用至「網路條件」分頁下方的「使用者代理程式」欄位，以便為裝置套用。

User-Agent Client Hints 是 Client Hints API 的新擴充功能，可讓開發人員以符合隱私權保護和人體工學的方式，存取使用者瀏覽器的相關資訊。

「網路狀況」分頁中裝置的 User-Agent Client Hints

Chromium 問題：1174299

在「問題」分頁中回報「奇異」模式的問題

開發人員工具現在會回報 怪異模式和受限怪異模式的問題。

相容模式和受限相容模式是網路標準制定前遺留下來的舊版瀏覽器模式。這些模式會模擬標準化前時代的版面配置行為，而這類行為經常會導致非預期的視覺效果。

在偵錯版面配置問題時，開發人員可能會認為問題是由使用者撰寫的 CSS 或 HTML 錯誤所造成，但實際上，問題是網頁處於相容模式。開發人員工具會提供修正建議。

在「問題」分頁中回報「奇異」模式的問題

Chromium 問題：622660

在「效能」面板中納入運算交集

開發人員工具現在會在火焰圖中顯示「Compute Intersections」。這些變更可協助您找出交集觀察器事件，並對其潛在的效能額外負擔進行偵錯。

在「效能」面板中運算交集

Chromium 問題：1199137

Lighthouse 7.5 在 Lighthouse 面板中

Lighthouse 面板目前執行 Lighthouse 7.5。對於在 CSS 中定義 aspect-ratio 的圖片，系統現在已移除「缺少明確的寬度和高度」警告。先前，Lighthouse 會針對未定義寬度和高度的圖片顯示警告。

如需完整的變更清單，請參閱版本資訊。

Chromium 問題：772558

呼叫堆疊中已淘汰的「Restart frame」內容選單

「Restart frame」選項現已淘汰。這項功能需要進一步開發才能正常運作，目前處於故障狀態，且經常當機。

已淘汰的「Restart frame」內容選單

Chromium 問題：1203606

[實驗功能] 通訊協定監測工具

Chrome 開發人員工具使用 Chrome 開發人員工具通訊協定 (CDP)，用於檢測、檢查、偵錯及剖析 Chrome 瀏覽器。通訊協定監控器可讓您查看 DevTools 發出的所有 CDP 要求和回應。

新增兩個函式，方便測試 CDP：

  • 新的「Save」按鈕可讓您將錄音訊息下載為 JSON 檔案
  • 可讓您直接傳送原始 CDP 指令的新欄位

通訊協定監測工具

Chromium 問題：1204004、1204466

[實驗功能] Puppeteer Recorder

Puppeteer 錄製器現在會根據您與瀏覽器的互動情形產生步驟清單，而先前 DevTools 會直接產生 Puppeteer 指令碼。新增「Export」按鈕，可讓您將步驟匯出為 Puppeteer 指令碼。

錄製步驟後，您可以使用新的「重播」按鈕重播步驟。請按照這篇文章的操作說明，瞭解如何開始錄製。

請注意，這是初期實驗。我們計劃隨著時間推移改善及擴充錄音工具的功能。

Puppeteer Recorder

Chromium 問題：1199787

下載預覽管道

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

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

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

開發人員工具的新功能

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