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

Jecelyn Yeen

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

在 JavaScript 編譯方面，DevTools 啟動速度現在快了約 37%(從 6.9 秒降至 5 秒)！🎉

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

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

Chromium 問題：1029427

全新 CSS 角度視覺化工具

開發人員工具現已改善 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 車道。

目前這個車道會顯示 Web Vitals 資訊，例如首次顯示內容所需時間 (FCP)、最大內容繪製 (LCP) 和版面配置轉換 (LS)。

如要進一步瞭解如何透過 Web Vitals 指標改善使用者體驗，請參閱 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」連結，即可在「元素」面板中顯示開啟器。

Chromium 問題：1107766

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

透過新的「網路要求」連結，查看所有服務工作者 (SW) 要求轉送資訊。這可讓開發人員在對 SW 進行偵錯時加入更多背景資訊。

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

Chromium 問題：不適用

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

複製資源值

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

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

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

Chromium 問題：1132084

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

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

Chromium 問題：1139615

Wasm 偵錯更新

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

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

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

Chromium 問題：1058836、1071432

在主控台中評估 Wasm 變數

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

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

Chromium 問題：1127914

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

開發人員工具現在會一律使用 kB 顯示檔案/記憶體大小。先前開發人員工具中的 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

自訂 Chords 鍵盤快速鍵

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

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

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

Chromium 問題：174309

下載預覽管道

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

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

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

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

開發人員工具新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。