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

Jecelyn Yeen

CSS 格線編輯器

這項功能是許多使用者引頸期盼的。現在可以使用全新 CSS 格線編輯器，預覽及撰寫 CSS 格線！

如果網頁上的 HTML 元素套用了 display: grid 或 display: inline-grid，您會在「樣式」窗格中看到旁邊顯示圖示。按一下圖示即可切換 CSS 格線編輯器。您可以在這裡使用螢幕上的圖示 (例如 justify-content: space-around) 預覽潛在變更，並按一下滑鼠即可製作格線外觀。

Chromium 問題：1203241

支援在主控台中const重新聲明

除了現有的 let 和 class 重新宣告，Play 管理中心現在也支援重新宣告 const 陳述式。對於使用控制台實驗新 JavaScript 程式碼的網頁開發人員來說，無法重新宣告是常見的困擾。

開發人員可以將程式碼複製並貼到開發人員工具控制台，查看程式碼的運作方式或進行實驗，也可以對程式碼進行小幅變更，然後重複上述程序，不必重新整理頁面。先前，如果程式碼重新宣告 const 繫結，開發人員工具就會擲回語法錯誤。

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

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

Chromium 問題：1076427

原始碼順序檢視畫面

您現在可以查看畫面上的來源元素順序，以便進行更完善的無障礙檢查。

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

Chromium 問題：1094406

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

在「元素」面板中，對 iframe 元素按一下滑鼠右鍵，然後選取「顯示框架詳細資料」，即可查看 iframe 詳細資料。

系統會將您帶往「應用程式」面板中的 iframe 詳細資料檢視畫面，您可以在這裡檢查文件詳細資料、安全性與隔離狀態、權限政策等，以偵錯潛在問題。

Chromium 問題：1192084

加強 CORS 偵錯支援

「問題」分頁現在會顯示跨源資源共享 (CORS) 錯誤。造成 CORS 錯誤的原因有很多，按一下即可展開各個問題，瞭解可能原因和解決方法。

Chromium 問題：1141824

網路面板更新

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

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

Chromium 問題：1201398

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

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

Chromium 問題：1103638

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

現在，系統會為「網路狀況」分頁下「使用者代理程式」欄位中的裝置套用 User-Agent Client Hints。

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

Chromium 問題：1174299

在「問題」分頁中回報 Quirks 模式問題

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

相容模式和有限相容模式是網路標準制定前的舊版瀏覽器模式。這些模式會模擬標準前時代的版面配置行為，這往往會導致非預期的視覺效果。

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

Chromium 問題：622660

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

開發人員工具現在會在火焰圖中顯示「計算交集」。這些變更可協助您找出 intersection observer 事件，並偵錯潛在的效能負荷。

Chromium 問題：1199137

Lighthouse 面板中的 Lighthouse 7.5

Lighthouse 面板現在執行的是 Lighthouse 7.5。如果圖片在 CSS 中定義了 aspect-ratio，系統就不會再顯示「缺少明確的寬度和高度」警告。先前，如果圖片未定義寬度和高度，Lighthouse 會顯示警告。

如需完整異動清單，請參閱版本資訊。

Chromium 問題：772558

通話堆疊中已淘汰的「重新啟動影格」內容選單

「重新啟動影格」選項已淘汰。這項功能需要進一步開發才能正常運作，目前功能異常，且經常會當機。

Chromium 問題：1203606

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

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

新增兩項功能，方便測試 CDP：

• 您可以使用新的「儲存」按鈕，將錄製的訊息下載為 JSON 檔案
• 新增欄位，可直接傳送原始 CDP 指令

Chromium 問題：1204004、1204466

[實驗性] Puppeteer 記錄器

Puppeteer 記錄器現在會根據您與瀏覽器的互動產生步驟清單，而先前開發人員工具會直接產生 Puppeteer 指令碼。新增「匯出」按鈕，方便您將步驟匯出為 Puppeteer 指令碼。

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

請注意，這項實驗尚處於早期階段。我們計畫在日後改良及擴充錄音工具功能。

Chromium 問題：1199787

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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