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

Jecelyn Yeen

加速開發人員工具啟動

開發人員工具的啟動速度現在加快了 37% (從 6.9 秒到 5 秒)！🎉

團隊進行了某些最佳化作業，以減少在啟動期間序列化、剖析和去序列化的效能負荷。

我們即將舉行工程網誌文章，詳細說明導入程序。敬請期待！

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

「效能」面板錄製內容中的全新網站體驗指標

效能記錄現可選擇顯示網站體驗指標資訊。

記錄載入效能後，勾選「Performance」面板中的「網站體驗指標」核取方塊，即可查看新的網站體驗指標通道。

車道目前會顯示網站體驗指標資訊，例如首次顯示內容所需時間 (FCP)、最大內容繪製 (LCP) 和版面配置位移 (LS)。

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

網站體驗指標通道

Chromium 問題：不適用

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

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

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

這可以奠定下一項改進的基礎，讓您對 CORS 問題提供更詳細的說明！

CORS 錯誤

Chromium 問題：1141824

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

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

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

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

如果 SAB 和 postMessage() 目前可用，但結構定義並未跨來源隔離，系統就會顯示淘汰警告訊息。如要進一步瞭解跨來源隔離，以及為什麼 SharedArrayBuffers 這類功能必須採取這項功能，請參閱這篇文章。

跨來源資訊

Chromium 問題：1139899

在「Frame Details」(頁框詳細資料) 檢視畫面中，提供新的網路工作人員資訊

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

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

Web Worker 資訊

Chromium 問題：1122507、1051466

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

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

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

開啟器頁框詳細資料

Chromium 問題：1107766

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

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

前往「Application」(應用程式) >「Service Workers」(服務工作站)，按一下 SW 的「Network requests」(網路要求)。「Network」(網路) 面板會在底部面板中開啟，顯示所有 Service Worker 相關要求 (網路要求會依 "is:service-worker-intercepted" 篩選)。

開啟 Service Worker 的網路面板

Chromium 問題：不適用

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

複製屬性值

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

複製屬性值

在「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

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

CSS Flex 偵錯

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

請試用這項功能，並與我們分享你的想法！

Chromium 問題：1144090、1139945

自訂和弦鍵盤快速鍵

開發人員工具自上次發布版本以來，開始支援自訂鍵盤快速鍵。

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

前往「Settings」 >「Shortcuts」，將遊標懸停在指令上，然後按一下「Edit」按鈕 (鉛筆圖示) 來自訂和弦捷徑。

和弦鍵盤快速鍵

Chromium 問題：174309

下載預覽管道

考慮使用 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