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

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

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

團隊進行了一些最佳化作業，以便降低序列化、剖析與 可在啟動過程中還原序列化程序

即將推出的工程網誌文章會詳細說明實作方式。敬請持續鎖定！

Chromium 問題：1029427

全新 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

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

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

前往「應用程式」>「儲存空間」，勾選「模擬自訂儲存空間配額」核取方塊，然後 輸入有效的數字即可模擬儲存空間配額。

Chromium 問題：945786、1146985

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

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

記錄載入效能後，請在「效能」面板中勾選「網站體驗指標」核取方塊 查看新的 Web Vitals 資料

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

如要進一步瞭解如何透過網路提供最佳使用者體驗，請參閱 web.dev/vitals Vitals 指標

Chromium 問題：不適用

在網路面板中回報 CORS 錯誤

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

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

這樣之後的改進才是後續改善的基礎 CORS 問題！

Chromium 問題：1141824

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

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

現在，「安全性與」隔離一節。

新的「API 可用性」部分會顯示 SharedArrayBuffer (SAB) 和 以及是否可以使用 postMessage() 分享

如果 SAB 和 postMessage() 目前可使用，系統就會顯示淘汰警告訊息，但 內容不會跨來源隔離進一步瞭解跨來源隔離和異動原因 這篇文章中 SharedArrayBuffers 等功能需要用到。

Chromium 問題：1139899

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

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

在「Application」面板中，展開內含網路工作站的頁框，然後選取下方的工作站 Workers 樹狀結構，檢視網路工作站的詳細資料。

Chromium 問題：1122507、1051466

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

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

在「Frames」樹狀結構下方選取已開啟的視窗，查看視窗詳細資料。按一下 「頁框」連結，可讓您在「元素」面板中開啟開啟工具。

Chromium 問題：1107766

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

使用新的「網路要求」連結查看所有 Service Worker (SW) 要求的轉送資訊。 這可讓開發人員在對 SW 進行偵錯時加入更多背景資訊。

前往「應用程式」>在「Service Workers」中按一下 SW 的「Network requests」。 「Network」面板會開啟至底部面板，顯示所有 Service Worker 相關要求 ( 系統會使用「is:service-worker-攔截 ed」"is:service-worker-intercepted"來篩選網路要求。

Chromium 問題：不適用

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

複製屬性值

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

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

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

Chromium 問題：1132084

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

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

Chromium 問題：1139615

Wasm 偵錯更新

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

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

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

Chromium 問題：1058836、1071432

在控制台中評估 Wasm 變數

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

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

Chromium 問題：1127914

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

開發人員工具現在一律使用 kB 顯示檔案/記憶體大小。舊版開發人員工具：混合 KB (1000 個位元組) 和 KiB (1,024 個位元組)。舉例來說，網路面板先前使用的是「kB」但有標籤，但 實際上卻使用 KiB 進行計算 導致不必要的混淆

Chromium 問題：1035309

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

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

Chromium 問題：1143833

實驗功能

CSS Flexbox 偵錯工具

即將推出 Flexbox 偵錯工具！

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

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

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

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

• flex-direction
• direction
• writing-mode

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

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

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

Chromium 問題：1144090、1139945

自訂 Chords 鍵盤快速鍵

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

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

前往「設定」>快速鍵：將滑鼠遊標懸停在指令上，然後按一下「編輯」按鈕 (鉛筆圖示) 自訂和弦捷徑。

Chromium 問題：174309

下載預覽頻道

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

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

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

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

開發人員工具新功能

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