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

Jecelyn Yeen

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

使用「效能洞察」面板，取得可做為行動依據的洞察資料，瞭解網站效能。

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

錄影完畢後，你可以在「洞察」窗格中查看成效洞察。點選各個洞察項目 (例如「導致轉譯遭到封鎖的要求」、「版面配置位移」)，瞭解問題和可能的修正方式。

如要透過逐步教學課程瞭解詳情，請參閱效能深入分析面板說明文件。

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

Chromium 問題：1270700

模擬淺色和深色主題的新快速鍵

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

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

Chromium 問題：1314299

「網路預覽」分頁的安全性提升

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

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

瀏覽器預設會封鎖樣式表要求。不過，如果您透過「網路」面板的「預覽」分頁開啟網頁，系統先前不會封鎖樣式表 (因此背景會變成紅色)。現在已如預期遭到封鎖 (第二張螢幕截圖)。

Chromium 問題：833147

改善中斷點的重新載入功能

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

舉例來說，在先前的這個 React 示範中，於 ReactDOM 中設定並重新載入中斷點時，指令碼會進入無窮迴圈。無窮迴圈導致「來源」面板中斷。

繼續執行 JavaScript 會為開發人員帶來許多麻煩，且可能導致轉譯器處於中斷狀態。這項異動可讓偵錯行為與 Firefox 等其他瀏覽器一致。

Chromium 問題：1014415、1004038、1112863、1134899

主控台更新

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

現在，控制台在評估指令碼時發生錯誤，會產生適當的錯誤事件，觸發 window.onerror 處理常式，並在視窗物件上以 "error" 事件的形式分派。

Chromium 問題：1295750

按下 Enter 鍵提交有效運算式

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

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

Chromium 問題：1260744

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

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

Chromium 問題：1257499

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

在「Styles」窗格中，查看已繼承的醒目顯示虛擬元素 (例如 ::selection、::spelling-error、::grammar-error 和 ::highlight)。先前不會顯示這些規則。

如規格所述，如果多個樣式發生衝突，層疊會決定勝出的樣式。這項新功能可協助您瞭解規則的繼承和優先順序。

Chromium 問題：1024156

其他重點

這個版本的重要修正項目包括：

• 「Properties」窗格現在會顯示存取子屬性，並預設提供值。先前是誤遭隱藏，(1309087)
• 「樣式」窗格現在會以刪除線正確顯示遭覆寫的 @support 規則。先前規則不會加上刪除線，(1298025)
• 修正「來源」面板中的 CSS 格式設定邏輯，避免編輯 CSS 時出現多個空白行。(1309588)
• 將「Expand recursively」(遞迴展開) 選項的上限設為 100，以免循環物件無限展開。(1272450)

[實驗功能] 複製 CSS 變更

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

此外，您也可以對任何規則按一下滑鼠右鍵，然後選取「複製所有 CSS 變更內容」，將所有 CSS 變更內容複製到宣告中。

此外，我們也在「變更」分頁中新增「複製」按鈕，方便您追蹤及複製 CSS 變更！

Chromium 問題：1268754

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

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

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

Chromium 問題：1245191

下載預覽版

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先版管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前，找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見或要求新功能，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。