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

Jecelyn Yeen

加快開發人員工具啟動速度

就 JavaScript 編譯而言 (從 6.9 秒到 5 秒)，開發人員工具的啟動速度現在快了 37% 左右！🎉

團隊進行了一些最佳化作業，以降低在啟動期間序列化、剖析和去序列化的效能負擔。

即將推出的工程網誌文章會詳細說明實作方式。持續關注後續消息！

Chromium 問題：1029427

全新 CSS 角度視覺化工具

開發人員工具現已改善 CSS 角度偵錯功能！

CSS 角度

如果網頁上的 HTML 元素已套用 CSS 角度 (例如 background: linear-gradient(angle, color-stop1, color-stop2)、transform: rotate(angle))，「Styles」窗格中的角度旁邊會顯示時鐘圖示。按一下時鐘圖示可切換時鐘疊加層。按一下時鐘內的任何位置，或拖曳針線以變更角度！

您也可以使用滑鼠和鍵盤快速鍵變更角度值，詳情請參閱我們的說明文件！

Chromium 問題：1126178、1138633

模擬不支援的映像檔類型

開發人員工具在「轉譯」分頁中新增兩種模擬功能，可讓您停用 AVIF 和 WebP 圖片格式。有了這些新的模擬作業，開發人員不必切換瀏覽器，就能更輕鬆地測試不同的圖片載入情境。

假設我們有下列 HTML 程式碼，可在新版瀏覽器上使用 AVIF 和 WebP 提供圖片，並為舊版瀏覽器提供備用 PNG 圖片。

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

開啟「轉譯」分頁，選取「停用 AVIF 圖片格式」，然後重新整理頁面。將滑鼠遊標懸停在 img src 上。目前的圖片 src (currentSrc) 現在是 WebP 圖片。

模擬圖片類型

Chromium 問題：1130556

在「儲存空間」窗格中模擬儲存空間配額大小

您現在可以在「儲存空間」窗格中覆寫儲存空間配額大小。這項功能可讓您模擬不同的裝置，並在磁碟可用性低的情況下測試應用程式的行為。

依序前往「Application」(應用程式) >「Storage」(儲存空間)，啟用「Simulate custom storage 需求條件」(模擬自訂儲存空間配額) 核取方塊，並輸入有效的數字，即可模擬儲存空間配額。

模擬儲存空間配額大小

Chromium 問題：945786、1146985

「效能」面板記錄中的全新 Web Vitals 指標

您現在可以選擇顯示 Web Vitals 資訊。

記錄載入效能後，勾選「效能」面板中的「Web Vitals」核取方塊，即可查看新的 Web Vitals 路徑。

這個通道目前會顯示 Web Vitals 資訊，例如「First Contentful Paint」(FCP)、「Largest Contentful Paint」(LCP) 和「Layout Shift」(LS) 等。

如要進一步瞭解如何透過 Web Vitals 指標改善使用者體驗，請參閱 web.dev/vitals。

Web Vitals 指標

Chromium 問題：不適用

在網路面板中回報 CORS 錯誤

如果網路要求因跨源資源共享 (CORS) 而失敗，開發人員工具現在會顯示 CORS 錯誤。

在「網路」面板中觀察失敗的 CORS 網路要求。狀態欄會顯示「CORS 錯誤」。將滑鼠遊標懸停在錯誤上，工具提示就會顯示錯誤代碼。先前，開發人員工具只會在 CORS 錯誤顯示一般狀態「(failed)」。

如此一來，之後我們就能針對 CORS 問題提供更詳細的說明，運用這些資訊做為後續改善的基礎！

CORS 錯誤

Chromium 問題：1141824

影格詳細資料檢視畫面更新

在「Frame Details」(頁框詳細資料) 檢視畫面中，顯示跨來源隔離資訊

「安全性與隔離」部分下方現在會顯示跨來源隔離狀態。

新的「API 可用性」部分會顯示 SharedArrayBuffer (SAB) 的可用性，以及能否透過 postMessage() 共用。

如果 SAB 和 postMessage() 目前可用，但結構定義並非跨來源隔離，系統就會顯示淘汰警告。請參閱這篇文章，進一步瞭解跨來源隔離，以及為何需要使用 SharedArrayBuffers 等功能。

跨來源資訊

Chromium 問題：1139899

「Frame Details」(頁框詳細資料) 檢視畫面中的新 Web Workers 資訊

開發人員工具現在會在頁框下方顯示專用的網路工作站。

在「Application」面板中，展開網路工作站的框架，然後選取「Workers」樹狀結構下方的 worker，即可查看網路工作站的詳細資料。

Web Worker 資訊

Chromium 問題：1122507、1051466

顯示開啟視窗的開啟畫面詳細資料

您現在可以查看開啟其他視窗的影格詳細資料。

在「Frames」樹狀結構下方選取已開啟的視窗，查看視窗詳細資料。按一下「Opener Frame」(開啟影格) 連結，即可在「元素」面板中開啟開啟工具。

開啟器影格詳細資料

Chromium 問題：1107766

透過「Service Workers」窗格開啟網路面板

使用新的「網路要求」連結查看所有 Service Worker (SW) 要求轉送資訊。這樣開發人員在對 SW 進行偵錯時，就能取得額外的背景資訊。

依序前往「Application」 >「Service Workers」，然後按一下 SW 的「Network requests」。「Network」面板會在底部面板中開啟，並顯示所有 Service Worker 相關要求 (網路要求會按照 "is:service-worker-intercepted" 進行篩選)。

透過 Service Worker 開啟網路面板

Chromium 問題：不適用

「網路」面板中的新複製選項

複製屬性值

內容選單中新增的「Copy value」選項可讓您複製網路要求的屬性值。

複製屬性值

在「Network」面板中，點選網路要求，開啟「Headers」窗格。以滑鼠右鍵按一下以下部分底下的任一屬性：要求酬載 (JSON) 表單資料查詢字串參數 要求標頭回應標頭

接著選取「複製值」，將屬性值複製到剪貼簿。

Chromium 問題：1132084

複製網路發起者的堆疊追蹤

在網路要求上按一下滑鼠右鍵，然後選取「Copy stacktrace」，將堆疊追蹤複製到剪貼簿。

複製堆疊追蹤

Chromium 問題：1139615

Wasm 偵錯更新

滑鼠遊標懸停時預覽 Wasm 變數值

在中斷點暫停時，將遊標懸停在 WebAssembly (Wasm) 中的變數上時，開發人員工具會顯示目前變數的目前值。

在「Sources」面板中開啟 Wasm 檔案，放入中斷點並重新整理頁面。將滑鼠遊標懸停在變數上即可查看值。

在滑鼠遊標懸停時預覽 Wasm 變數

Chromium 問題：1058836、1071432

在控制台中評估 Wasm 變數

現在起，在中斷點暫停時，即可透過控制台評估 Wasm 變數。

在這個範例中，我們在 local.get $input 行加入中斷點。偵錯時，在控制台中輸入 $input 會傳回變數目前的值，在本例中為 4。

在控制台中評估 Wasm 變數

Chromium 問題：1127914

檔案/記憶體大小的一致測量單位

開發人員工具現在一律使用 kB 顯示檔案/記憶體大小。先前開發人員工具中的 kB (1000 位元組) 和 KiB (1024 位元組) 不成問題。舉例來說，網路面板先前使用了「kB」標籤，但實際上卻使用 KiB 進行計算，因此造成不必要的混淆。

Chromium 問題：1035309

在「元素」面板中醒目顯示虛擬元素

開發人員工具已提高虛擬元素的色彩對比，讓你更容易找出這些元素。

突顯虛擬元素

Chromium 問題：1143833

實驗功能

CSS Flexbox 偵錯工具

即將推出 Flexbox 偵錯工具！

首先，開發人員工具會在「元素」面板中顯示已套用 display: flex 的元素 flex 標記。

此外，系統會在下列 Flexbox 屬性中新增對齊圖示：

  • flex-direction
  • align-items
  • align-content
  • align-self
  • justify-items
  • justify-content

更重要的是，這些圖示具有情境感知功能。圖示方向會依下列條件調整：

  • flex-direction
  • direction
  • writing-mode

這些圖示旨在協助您將網頁的彈性箱版面配置更清楚地呈現。

CSS Flex 偵錯

以下是 Flexbox 工具功能的設計文件。我們很快就會新增更多功能。

歡迎立即試用，並與我們分享您的想法！

Chromium 問題：1144090、1139945

自訂 Chords 鍵盤快速鍵

開發人員工具自上次發布後已新增實驗性的自訂鍵盤快速鍵支援功能。

您現在可以在快速鍵編輯器中建立 Chord (多鍵捷徑)。

依序前往「Settings」 >「Shortcuts」，將遊標懸停在指令上並按一下「Edit」按鈕 (鉛筆圖示)，即可自訂和弦快速鍵。

Chords 鍵盤快速鍵

Chromium 問題：174309

下載預覽頻道

建議您使用 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