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

Jecelyn Yeen

CSS 格線編輯器

這項功能備受期待，現在可以使用全新 CSS Grid 編輯器預覽及編寫 CSS Grid！

CSS 格線編輯器

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

Chromium 問題：1203241

支援在控制台中重新宣告 const

除了現有的 let 和 class 重新宣告外，控制台現在也支援重新宣告 const 陳述式。網頁程式開發人員使用控制台測試新的 JavaScript 程式碼時，無法重新宣告常會造成困擾。

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

請參考下方範例。const 重新宣告支援跨個別 REPL 指令碼 (請參閱變數 a)。請注意，系統不支援下列情境：

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

const 重新宣告

Chromium 問題：1076427

原始碼順序檢視器

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

原始碼順序檢視器

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

Chromium 問題：1094406

查看影格詳細資料的新快速鍵

在「Elements」面板中的 iframe 元素上按一下滑鼠右鍵，然後選取「Show frame details」，即可查看 iframe 詳細資料。

顯示頁框詳細資料

系統會將您導向「Application」面板中的 iframe 詳細資料檢視畫面，您可以在這裡查看文件詳細資料、安全性和隔離狀態、權限政策等，以便偵錯潛在問題。

影格詳細資料檢視畫面

Chromium 問題：1192084

增強型 CORS 偵錯支援

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

「問題」分頁中的 CORS 問題

Chromium 問題：1141824

網路面板更新

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

XHR 標籤現已重新命名為「Fetch/XHR」。這項異動可更清楚表明，這項篩選器包含 XMLHttpRequest 和 Fetch API 網路要求。

Fetch/XHR 標籤

Chromium 問題：1201398

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

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

依 Wasm 篩選

Chromium 問題：1103638

「網路狀況」分頁中的裝置使用者代理程式用戶端提示

使用者代理程式用戶端提示現在會套用至「Network conditions」分頁中「使用者代理程式」欄位內的裝置。

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

「網路狀況」分頁中的裝置使用者代理程式用戶端提示

Chromium 問題：1174299

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

開發人員工具現在會回報相容模式和有限相容模式問題。

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

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

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

Chromium 問題：622660

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

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

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

Chromium 問題：1199137

Lighthouse 面板中的 Lighthouse 7.5

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

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

Chromium 問題：772558

已淘汰呼叫堆疊中的「重新啟動頁框」內容選單

「Restart frame」選項現已淘汰。這項功能需要進一步開發才能正常運作，目前無法使用，而且經常當機。

已淘汰的「重新啟動頁框」內容選單

Chromium 問題：1203606

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

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

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

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

通訊協定監控

Chromium 問題：1204004、1204466

[實驗功能] Puppeteer Recorder

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

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

請注意，這項實驗仍處於早期階段。我們計畫逐步改善及擴充錄音工具的功能。

Puppeteer Recorder

Chromium 問題：1199787

下載預覽管道

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

聯絡 Chrome 開發人員工具團隊

您可以透過下列管道，討論新功能、更新或任何與開發人員工具相關的事項。

開發人員工具新功能

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