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 宣告外，Play 管理中心現在也支援重新宣告 const 陳述式的功能。因為網頁程式開發人員透過控制台嘗試新的 JavaScript 程式碼，導致無法重新宣告，常會令人困擾。

如此一來，開發人員就能複製程式碼並貼到開發人員工具控制台中，瞭解程式碼的運作方式或進行實驗，或是對程式碼進行小幅變更，而且不必重新整理頁面就能重複執行程序。先前，如果程式碼重新宣告 const 繫結，開發人員工具會擲回語法錯誤。

請參考以下範例。多個獨立的 REPL 指令碼都支援 const 重新宣告 (參照變數 a)。請注意，設計不支援下列情境：

  • const REPL 指令碼不允許重新宣告頁面指令碼
  • 不允許在同一個 REPL 指令碼中使用 const 重新宣告 (參照變數 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 網路要求。

擷取/XHR 標籤

Chromium 問題：1201398

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

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

依 Wasm 篩選

Chromium 問題：1103638

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

現在，「網路條件」分頁下方「使用者代理程式」欄位的裝置會套用使用者代理程式用戶端提示。

User-Agent Client Hints 是 Client Hints API 的一項新擴充項目，讓開發人員能夠以保護隱私權和符合使用者需求的方式，存取使用者瀏覽器的相關資訊。

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

Chromium 問題：1174299

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

開發人員工具現在會回報Quirks Mode 和 Limited-quirks Mode 問題。

相容於網路標準之前的舊版瀏覽器模式。這些模式會模擬在使用前符合標準時的版面配置行為，但這往往會導致意想不到的視覺效果。

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

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

Chromium 問題：622660

在效能面板中加入運算交叉點

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

效能面板中的運算交集

Chromium 問題：1199137

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 錄音工具現在會根據您與瀏覽器的互動產生一份步驟清單，開發人員工具先前則是直接產生 Puppeteer 指令碼。新增了新的「Export」按鈕，方便您將步驟匯出為 Puppeteer 指令碼。

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

請注意，這只是初期實驗階段，我們計劃逐步改善和擴充錄音工具的功能。

布偶錄音機

Chromium 問題：1199787

下載預覽頻道

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

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

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

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

開發人員工具新功能

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