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

對受信任類型違規問題提供的偵錯支援

信任類型違規中斷點

您現在可以在「Sources」面板中設定中斷點,並擷取受信任類型違規事件的例外狀況。

Trusted Types API 可協助您避免 DOM 型的跨網站指令碼攻擊安全漏洞。請參閱這篇文章,瞭解如何撰寫、審查及維護應用程式,避免受到信任類型的 DOM XSS 安全漏洞。

在「Sources」面板中,開啟「debugger」側欄窗格。展開「CSP IllegalBreakpoints」區段,並啟用「Trusted Type violation」核取方塊,以暫停例外狀況。歡迎前往這個示範網頁親自體驗。

信任類型違規中斷點

Chromium 問題:1142804

「Sources」面板現在會在違反「Trusted Type」的那一行旁邊顯示警告圖示。將滑鼠遊標懸停在這個圖示上,即可預覽例外狀況。按一下該按鈕,即可展開「Issues」分頁,當中會提供例外狀況的詳細資訊和修正指南。

「來源」面板中的「問題」分頁連結問題

Chromium 問題:1150883

擷取可視區域以外的節點螢幕截圖

您現在可以擷取完整節點的節點螢幕截圖,包括需捲動位置的內容。先前,當可視區域未顯示內容時,系統會截斷螢幕截圖。現在整頁的螢幕擷取畫面 也會更為精確

在「Elements」面板中,在元素上按一下滑鼠右鍵,然後選取「Capture node screenshot」

擷取可視區域以外的節點螢幕截圖

Chromium 問題:1003629

網路要求的全新「信任權杖」分頁

使用新的「Trust Tokens」分頁,檢查信任權杖網路要求。

Trust Token 是一種新的 API,可協助防範詐欺行為,以及在不需要被動追蹤的情況下區分機器人和真人。瞭解如何開始使用信任權杖

我們將在下一個版本中進一步支援偵錯功能。

網路要求的全新「信任權杖」分頁

Chromium 問題:1126824

燈塔 7 號燈塔

Lighthouse 面板現在正在執行 Lighthouse 7。如需完整的異動清單,請參閱版本資訊

燈塔 7 號燈塔

Lighthouse 7 的新稽核:

  • 預先載入最大內容繪製 (LCP) 圖片。如果 LCP 元素使用的圖片已預先載入以縮短 LCP 時間,則稽核。
  • Issues 面板記錄的問題。表示 Issues 面板中的未解決問題清單。
  • 漸進式網頁應用程式 (PWA)。PWA 類別的變化幅度相當大。
  • 「可安裝」群組現已完全採用啟用 Chrome 可安裝條件的功能檢查。這些信號與「Manifest」窗格中顯示的信號相同。

    • 「註冊 Service Worker...」稽核會移至「PWA 最佳化」群組,且「使用 HTTPS」稽核已納入主要「安裝性需求」稽核中。
    • 系統會移除「快速可靠的」群組。隨著新版「安裝性要求」稽核包括離線功能檢查,我們已移除「目前頁面和 start_url 在離線時回應 200」的稽核狀態。我們也移除了「網頁載入在行動網路上的速度夠快」稽核功能。

Chromium 問題:772558

元素面板更新

支援強制使用 CSS :target 狀態

您現在可以使用開發人員工具強制執行及檢查 CSS :target 狀態。

在「元素」面板中選取元素,然後切換元素狀態。啟用 :target 核取方塊,即可強制並檢查樣式。

如果網址中的雜湊和元素的 ID 相同,請使用 :target 虛擬類別為元素設定樣式。請觀看這個示範影片,親自體驗。有了這項新的開發人員工具功能,您就不必隨時手動變更網址,也能測試這類樣式。

強制執行 CSS 的「:target」狀態

Chromium 問題:1156628

重複元素的新捷徑

如要立即複製元素,請使用新的「複製元素」捷徑。

在「元素」面板中的所需元素上按一下滑鼠右鍵,然後選取「複製元素」。系統會在其下方建立新元素。

你也可以使用鍵盤快速鍵複製元素:

  • Mac:Shift + Option + ⬇️
  • 視窗/ Linux:Shift + Alt + ⬇️

元素重複

Chromium 問題:11507971150797

自訂 CSS 屬性的顏色挑選器

「Styles」窗格現在會顯示自訂 CSS 屬性的顏色挑選器。

此外,您可以按住 Shift 鍵並按一下顏色挑選器,以循環顯示顏色值的 RGBA、HSLA 和十六進位表示。

自訂 CSS 屬性的顏色挑選器

Chromium 問題:1147016

複製 CSS 屬性的新捷徑

您現在可以透過幾個新的快速鍵,更快速地複製 CSS 屬性。

在「Elements」(元素) 面板中選取元素,然後在「Styles」窗格中的 CSS 類別或 CSS 屬性上按一下滑鼠右鍵,即可複製該值。

複製 CSS 屬性的新捷徑

CSS 類別的複製選項:

  • 複製選取器。複製目前的選取器名稱。
  • 複製規則:複製目前選取器的規則。
  • 複製所有宣告:複製目前規則底下的所有宣告,包括無效和前置字元的屬性。

CSS 資源複製選項:

  • 複製聲明。複製目前行的宣告。
  • 複製資源。複製目前行的屬性。
  • 複製值:複製目前行的值。

Chromium 問題:1152391

Cookie 更新

顯示已解碼網址 Cookie 的新選項

您現在可以選擇在「Cookie」窗格中查看已解碼網址的 Cookie 值

前往「應用程式」面板,然後選取「Cookie」窗格。在清單中選取任何 Cookie。 啟用新的「顯示已解碼的網址」核取方塊,即可查看已解碼的 Cookie。

可選擇顯示已解碼網址的 Cookie

Chromium 問題:997625

僅清除可見的 Cookie

「Cookie」窗格中的「Clear all cookies」按鈕現在由「Clear filter cookies」按鈕取代。

在「應用程式」面板 >「Cookie」窗格中,在文字方塊中輸入文字以篩選 Cookie。在本範例中,我們會以「PREF」篩選清單。按一下「清除篩選的 Cookie」按鈕,刪除顯示的 Cookie。清除篩選器文字,您將會在清單中看到其他 Cookie。過去,您只能選擇清除所有 Cookie。

僅清除可見的 Cookie

Chromium 問題:978059

可在「儲存空間」窗格中清除第三方 Cookie 的新選項

現在當您清除「Storage」窗格中的網站資料時,開發人員工具現在預設只會清除第一方 Cookie。啟用「包括第三方 Cookie」,一併清除第三方 Cookie。

用於清除第三方 Cookie 的選項

Chromium 問題:1012337

編輯自訂裝置的使用者代理程式用戶端提示

您現在可以編輯自訂裝置的 User-Agent Client Hints。

依序前往「設定」 >「裝置」,然後按一下「新增自訂裝置...」。展開「User agent client hints」區段來編輯用戶端提示。

編輯使用者代理程式用戶端提示

User-Agent Client Hints 是 User-Agent 字串的替代方案,可讓開發人員以保護隱私權且符合人體工學的方式,存取使用者瀏覽器的相關資訊。如要進一步瞭解 User-Agent Client Hints,請參閱 web.dev/user-agent-client-hints/

Chromium 問題:1073909

網路面板更新

保留「記錄網路記錄」設定

開發人員工具現在會保留「記錄網路記錄」設定。在過去,開發人員工具會在頁面重新載入時重設使用者的選擇。

記錄網路記錄

Chromium 問題:1122580

在「網路」面板中查看 WebTransport 連線

「Network」面板現在會顯示 WebTransport 連線。

WebTransport 連線

WebTransport 是全新的 API,提供低延遲、雙向的用戶端伺服器訊息傳遞服務。如要進一步瞭解其用途,以及如何針對日後實作項目提供意見,請前往 web.dev/webtransport/

Chromium 問題:1152290

「線上」已重新命名為「無節流」

網路模擬選項「Online」現已重新命名為「No Throttling」。

記錄網路記錄

Chromium 問題:1028078

控制台、來源面板和樣式窗格中的新複製選項

在「控制台」和「來源」面板中複製物件的新捷徑

您現在可以使用「控制台」和「來源」面板中的新捷徑來複製物件值。當需要複製的大型物件 (例如長陣列) 時,這種做法會特別實用。

在控制台中複製物件

複製「來源」面板中的物件

Chromium 問題:11498591148353

可在「來源」面板和「樣式」窗格中複製檔案名稱的新捷徑

如要複製檔案名稱,請按一下滑鼠右鍵:

  • 顯示在「來源」面板中的檔案
  • 「Elements」面板的「Styles」窗格中的檔案名稱

從內容選單中選取「複製檔案名稱」,即可複製檔案名稱。

複製「來源」面板中的檔案名稱

複製「Styles」(樣式) 窗格中的檔案名稱

Chromium 問題:1155120

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

「Frame 詳細資料」檢視畫面中的新 Service Worker 資訊

開發人員工具現在會在建立 Service Worker 的框架下方顯示服務工作站。

在「Application」面板中,展開內含 Service Worker 的影格,然後在「Service Workers」樹狀結構下方選取 Service Worker,查看詳細資料。

「Frame Details」(頁框詳細資料) 檢視畫面中的 Service Worker 資訊

Chromium 問題:1122507

在「影格詳細資料」檢視畫面中測量記憶體資訊

performance.measureMemory() API 狀態現在會顯示在「API 可用性」部分下方。

新的 performance.measureMemory() API 會估算整個網頁的記憶體用量。如要瞭解如何利用這個新的 API 監控網頁的記憶體總用量,請參閱這篇文章

測量記憶體

Chromium 問題:1139899

透過「問題」分頁提供意見回饋

如要改善問題訊息,請前往「Console」或「More Settings」 >「More tools」 >「Issues」 >前往「Issues」分頁,開啟「Issues」分頁。展開問題訊息,然後按一下「 the issue message will be you like to you?」(請問問題訊息對您有幫助嗎?),然後在彈出式視窗中提供意見回饋。

問題意見回饋連結

「Performance」面板中捨棄的影格

現在在「Performance」(效能) 面板中分析載入效能時,「Frames」部分現在會將捨棄的影格標示為紅色。將滑鼠遊標懸停在圖案上,即可查看影格速率。

捨棄的影格數

Chromium 問題:1075865

在裝置模式中模擬折疊式裝置和雙螢幕

您現在可以在開發人員工具中模擬雙螢幕和折疊式裝置。

啟用裝置工具列後,請選取下列任一裝置:Surface DuoSamsung Galaxy Fold

按一下新的跨距圖示,即可在單螢幕/折疊/雙螢幕或展開姿勢間進行切換。

您也可以啟用實驗功能網頁平台功能,存取新的 CSS 媒體 screen-spanning 功能和 JavaScript getWindowSegments API。這個實驗功能圖示會顯示「Experimental Web Platform 功能」標記的狀態。標記功能開啟時,圖示會醒目顯示。前往 chrome://flags 並切換旗標。

模擬雙螢幕功能

Chromium 問題:1054281

實驗功能

使用 Puppeteer Recorder 自動執行瀏覽器測試

開發人員工具現在可以根據您與瀏覽器的互動產生 Puppeteer 指令碼,更輕鬆地自動進行瀏覽器測試。Puppeteer 是 Node.js 程式庫,提供透過開發人員工具通訊協定控制 Chrome 或 Chromium 的高階 API。

前往這個示範頁面。在開發人員工具中開啟「Sources」面板。選取左側窗格中的「Recording」分頁標籤。新增記錄並為檔案命名 (例如 test01.js)。

按一下底部的「Record」按鈕,即可開始記錄互動。試著填寫畫面上的表單。您會發現 Puppeteer 命令會據此附加至檔案。再按一下「Record」按鈕即可停止記錄。

如要執行指令碼,請按照 Puppeteer 官方網站中的入門指南操作。

請注意,這是早期實驗階段。我們計劃逐步改善及擴充錄音工具功能。

Puppeteer 錄音工具

Chromium 問題:1144127

「Styles」(樣式) 窗格中的字型編輯器

新的字型編輯器是樣式窗格中的彈出式編輯器,適用於字型相關屬性,協助您找到最適合網頁的字體排版。

彈出式視窗提供了簡潔的 UI,以便利用一系列符合直覺的輸入類型動態操控字體排版。

「Styles」(樣式) 窗格中的字型編輯器

Chromium 問題:1093229

CSS Flexbox 偵錯工具

開發人員工具新增了 flexbox 偵錯自上次版本的實驗性支援。

開發人員工具現在會繪製指導線,協助您以更視覺化的方式呈現 CSS align-items 屬性。系統也支援 CSS gap 屬性。在本例中,我們有 CSS gap: 12px;。請注意每個間隔的遷移模式。

彈性凸版

Chromium 問題:1139949

全新的 CSP 違規分頁

透過全新的「CSP 違規事項」分頁,迅速查看所有內容安全政策 (CSP) 違規事項。這個新分頁是一項實驗功能,應可讓您更輕鬆地處理含有大量 CSP 和受信任類型違規的網頁。

「CSP 違規事項」分頁

Chromium 問題:1137837

新的色彩對比計算 - 進階感知對比演算法 (APCA)

進階感知對比演算法 (APCA) 已取代色彩挑選器中的 AA/AAA 指南對比度。

APCA 是一種以色彩感知的現代研究為基礎,用來計算對比的新方法。與 AA/AAA 規範相比,APCA 較因情境而異。對比度是根據文字的空間屬性 (字型大小和大小)、色彩 (文字與背景的感知亮度差異),以及情境 (環境光源、周遭環境、文字的預期用途) 計算而得。

顏色挑選器中的 APCA

以下範例顯示 APCA 門檻為 38%。對比度必須符合或超過列出的值。這個值是根據字型粗細和大小計算,請參閱這份 APCA 對照表

Chromium 問題:1121900

下載預覽管道

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