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

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

開發人員工具啟動時的 JavaScript 編譯速度現在快了約 37%(從 6.9 秒降至 5 秒)！🎉

團隊進行了一些最佳化調整，以減少啟動期間序列化、剖析和反序列化的效能額外負擔。

我們將在近期發布工程網誌文章，詳細說明實作方式。敬請持續鎖定！

Chromium 問題：1029427

全新 CSS 角度視覺化工具

DevTools 現已提供更完善的 CSS 角度偵錯功能！

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

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

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 資訊，例如首次顯示內容所需時間 (FCP)、最大內容繪製 (LCP) 和版面配置轉換 (LS)。

請造訪 web.dev/vitals，進一步瞭解如何運用網站使用體驗核心指標來改善使用者體驗。

Chromium 問題：不適用

在「網路」面板中回報 CORS 錯誤

當網路要求因跨來源資源共享 (CORS) 而失敗時，現在 DevTools 會顯示 CORS 錯誤。

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

這為我們日後提供更詳細的 CORS 問題說明奠定基礎！

Chromium 問題：1141824

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

頁框詳細資料檢視畫面中的跨來源隔離資訊

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

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

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

Chromium 問題：1139899

在「Frame」詳細資料檢視畫面中顯示新的 Web Workers 資訊

開發人員工具現在會在建立網頁工作站的框架下方顯示專屬網頁工作站。

在「Application」面板中，展開含有網路 worker 的影格，然後選取「Workers」樹狀結構下方的 worker，即可查看網路 worker 的詳細資料。

Chromium 問題：1122507、1051466

顯示已開啟視窗的開啟者框架詳細資料

您現在可以查看哪個影格導致另一個視窗開啟的詳細資料。

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

Chromium 問題：1107766

從「Service Workers」窗格開啟「Network」面板

透過新的「網路要求」連結，查看所有服務工作者 (SW) 要求轉送資訊。這可在開發人員偵錯 SW 時提供額外的背景資訊。

依序前往「Application」 >「Service Workers」，然後點選 Service Worker 的「Network requests」。底部面板會開啟「Network」面板，顯示所有服務工作者相關要求 (網路要求會根據「is:service-worker-intercepted」"is:service-worker-intercepted"過濾)。

Chromium 問題：不適用

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

複製資源值

在內容選單中，新增的「複製值」選項可讓您複製網路要求的資源值。

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

接著，您可以選取「複製值」，將資源值複製到剪貼簿。

Chromium 問題：1132084

複製網路啟動器的堆疊追蹤

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

Chromium 問題：1139615

Wasm 偵錯更新

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

在 WebAssembly (Wasm) 解組作業中，當您將滑鼠游標懸停在暫停在暫停點的變數上時，DevTools 現在會顯示變數的目前值。

在「Sources」面板中開啟 Wasm 檔案，設定中斷點，然後重新整理網頁。將滑鼠游標懸停在變數上，即可查看值。

Chromium 問題：1058836、1071432

在主控台中評估 Wasm 變數

您現在可以在控制台中評估 Wasm 變數，同時暫停在中斷點。

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

Chromium 問題：1127914

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

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

Chromium 問題：1035309

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

開發人員工具已提高了疑似元素的色彩對比，方便您更輕鬆地找出這些元素。

Chromium 問題：1143833

實驗功能

CSS Flexbox 偵錯工具

Flexbox 偵錯工具即將推出！

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

此外，下列彈性容器屬性中新增了對齊圖示：

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

此外，這些圖示會根據情境顯示。圖示方向會根據下列項目調整：

• flex-direction
• direction
• writing-mode

這些圖示旨在協助您更清楚地掌握網頁的彈性容器版面配置。

以下是 Flexbox 工具功能的設計文件。我們會盡快推出更多功能。

歡迎試用，並與我們分享你的想法！

Chromium 問題：1144090、1139945

自訂和弦鍵盤快速鍵

自上次發布版本起，DevTools 已新增自訂鍵盤快速鍵的實驗性支援功能。

你現在可以在捷徑編輯器中建立和編輯和弦 (又稱為多按鍵捷徑)。

依序前往「設定」 >「快速鍵」，將滑鼠游標懸停在指令上，然後按一下「編輯」按鈕 (筆圖示)，即可自訂和弦快速鍵。

Chromium 問題：174309

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「more_vert」more_vert更多選項 >「Help」 >「Report a DevTools issue」，即可回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。