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

Jecelyn Yeen

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

使用「成效深入分析」面板，瞭解網站成效的實用洞察資料和用途。

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

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

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

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

Chromium 問題：1270700

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

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

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

Chromium 問題：1314299

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

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

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

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

Chromium 問題：833147

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

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

舉例來說，在這個 React 示範中，當指令碼在 ReactDOM 中斷點設定及重新載入時，會進入無限迴圈。無限迴圈導致「Sources」面板發生錯誤。

繼續執行 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)。
• 「Styles」窗格現在會正確顯示已覆寫的 @support 規則，並以刪除線標示。先前規則並未加註刪除線。(1298025)。
• 修正 來源面板中的 CSS 格式邏輯，該邏輯會在編輯 CSS 時產生多個空白行。(1309588)。
• 在控制台中，將物件的「Expand recursively」選項上限設為 100，以免循環物件無限擴張。(1272450)

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

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

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

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

Chromium 問題：1268754

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

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

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

Chromium 問題：1245191

下載預覽管道

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

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

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。