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

預先發布版功能:全新的「效能深入分析」面板

使用「成效深入分析」面板,瞭解網站成效的實用且以用途為導向的洞察資料。

開啟面板,然後根據用途開始錄製新影片。舉例來說,我們來測量這個示範頁面的網頁載入速度。

全新的「效能深入分析」面板

錄製完成後,您可以在「洞察」窗格中查看成效洞察。按一下每個洞察項目 (例如轉譯阻斷要求、版面配置變動),瞭解問題和可能的修正方式。

請參閱「效能深入分析」面板說明文件,瞭解詳情及逐步操作教學。

這項功能目前為預先發布版,可協助網頁開發人員 (尤其是非效能專家) 找出並修正潛在的效能問題。我們的團隊正積極開發這項功能,歡迎提供意見,協助我們進一步改善這項功能。

Chromium 問題:1270700

模擬淺色和深色主題的新捷徑

您現在可以使用「Styles」窗格中的新捷徑,更快速地模擬淺色和深色主題 (CSS 媒體功能 prefers-color-scheme)。

先前在「算繪」分頁中,模擬主題需要更多步驟。

模擬淺色和深色主題的新捷徑

Chromium 問題:1314299

強化「Network Preview」分頁的安全性

開發人員工具現在會在「網路」面板的「預覽」分頁中套用內容安全政策 (CSP)。

舉例來說,第一張螢幕截圖顯示含有混合內容的網頁。網頁會透過安全的 HTTPS 連線載入,但樣式表會透過不安全的 HTTP 連線載入。

瀏覽器會根據預設封鎖樣式表要求。不過,如果您透過「Network」面板中的「Preview」分頁開啟網頁,則之前並未封鎖樣式表單 (因此背景會變成紅色)。系統現在會如預期般封鎖 (第二張螢幕截圖)。

改善「Network Preview」分頁的安全性

Chromium 問題:833147

改善在中斷點重新載入

偵錯工具現在會在中斷點重新載入時終止指令碼執行作業。

舉例來說,在這個 React 示範中,當指令碼在 ReactDOM 中斷點設定及重新載入時,會陷入無限迴圈。無限迴圈導致「Sources」面板無法正常運作。

繼續執行 JavaScript 會為開發人員帶來許多麻煩,並可能讓轉譯器處於損壞狀態。這項變更可讓偵錯行為與 Firefox 等其他瀏覽器保持一致。

改善在中斷點重新載入

Chromium 問題:1014415100403811128631134899

主控台更新

在主控台中處理指令碼執行錯誤

控制台中的程式碼評估期間發生的錯誤現在會產生適當的錯誤事件,觸發 window.onerror 處理常式,並以視窗物件上的 "error" 事件調度。

在主控台中處理指令碼執行錯誤

Chromium 問題:1295750

按下 Enter 鍵提交即時運算式

輸入即時運算式後,您可以按一下 Enter 提交。先前按下 Enter 鍵會新增一行。這與開發人員工具的其他部分不一致。

如要在「即時運算式」編輯器中新增一行,請改用 Shift + Enter

按下 Enter 鍵提交即時運算式

Chromium 問題:1260744

在開始時取消使用者流程錄製

您可以在開始錄製使用者流程時取消錄製。先前無法取消錄音。

在開始時取消使用者流程錄製

Chromium 問題:1257499

在「樣式」窗格中顯示繼承的醒目顯示偽元素

在「Styles」窗格中查看已繼承的醒目顯示偽元素 (例如 ::selection::spelling-error::grammar-error::highlight)。先前並未顯示這些規則。

規格說明所述,當多種樣式發生衝突時,系統會依照層疊順序決定優先採用的樣式。這項新功能可協助您瞭解規則的繼承和優先順序。

在「樣式」窗格中顯示繼承的醒目顯示偽元素

Chromium 問題:1024156

其他精選內容

以下是這個版本中值得注意的修正項目:

  • 「Properties」窗格現在會預設顯示具有值的存取工具屬性。先前誤將其隱藏。(1309087)。
  • 「Styles」窗格現在會正確顯示已覆寫的 @support 規則,並以刪除線顯示。先前規則並未加註刪除線。(1298025)。
  • 修正 來源面板中的 CSS 格式邏輯,該邏輯會在編輯 CSS 時產生多個空白行。(1309588)。
  • 控制台中,將物件的「Expand recursively」選項設為最多 100 次,以免循環物件無限擴展。(1272450)

[實驗功能] 複製 CSS 變更內容

在這個實驗中,樣式窗格會以綠色醒目顯示 CSS 變更。將滑鼠游標懸停在已變更的規則上,然後點選旁邊的新複製按鈕,即可複製規則。

除此之外,您也可以按一下任何規則的滑鼠右鍵,然後選取「Copy all CSS changes」,即可複製所有宣告中的 CSS 變更內容。

我們也新增了「複製」按鈕至「變更」分頁,方便您追蹤及複製 CSS 變更!

複製 CSS 變更內容

Chromium 問題:1268754

[實驗功能] 在瀏覽器外挑選顏色

啟用這項實驗,即可在瀏覽器外使用顏色挑選器挑選顏色。先前只能在瀏覽器中挑選顏色。

在「樣式」窗格中,按一下任何顏色預覽畫面,開啟顏色挑選器。使用滴管從任何位置挑選顏色。

在瀏覽器外挑選顏色

Chromium 問題:1245191

下載預覽管道

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

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

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

開發人員工具的新功能

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