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

Jecelyn Yeen

CSS 格線編輯器

眾所期盼的功能。您現在可以透過新的 CSS 格線編輯器預覽及編寫 CSS 格線！

CSS 格線編輯器

網頁上的 HTML 元素套用 display: grid 或 display: inline-grid 後，您就可以在「Styles」窗格中看到該元素旁邊出現圖示。按一下圖示即可切換 CSS 格狀編輯器。您可以在這裡使用畫面上的圖示 (例如 justify-content: space-around) 預覽可能的變更，而且只要按一下滑鼠即可編寫格線外觀。

Chromium 問題：1203241

Play 管理中心支援 const 宣告

除了現有的 let 和 class 宣告以外，Play 管理中心現在也支援重新宣告 const 陳述式。網頁程式開發人員如果透過控制台測試新的 JavaScript 程式碼，會因為無法重新宣告而感到失望。

如此一來，開發人員就能將程式碼複製貼到開發人員工具控制台中，查看程式碼的運作方式或實驗結果、小幅修改程式碼，並且不必重新整理頁面，就能重複執行程序。在過去，如果程式碼重新宣告 const 繫結，開發人員工具就會發生語法錯誤。

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

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

常數宣告

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

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

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

相容模式和受限模式都是網路標準之前的舊版瀏覽器模式。這些模式可模擬在標準時代之前的版面配置行為，經常導致非預期的視覺效果。

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

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

Chromium 問題：622660

將運算十字路口納入效能面板

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

「Performance」(效能) 面板中的 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 錄音工具現在會根據您與瀏覽器的互動產生步驟清單，之前的開發人員工具則會直接產生 Puppeteer 指令碼。新增了一個「匯出」按鈕，可讓您將步驟匯出為 Puppeteer 指令碼。

記錄步驟後，您可以使用新的「重播」按鈕重播步驟。如要瞭解如何開始錄製，請參閱這篇文章。

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

Puppeteer 錄音工具

Chromium 問題：1199787

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

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 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

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