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 影片留言。

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59