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

Jecelyn Yeen

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

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

開啟面板，然後依據用途開始新的錄製作業。舉例來說，可以評估這個示範網頁的網頁載入。

新版效能深入分析面板

記錄完成後，您可以在「Insights」窗格中取得成效深入分析。按一下各個洞察項目 (例如轉譯封鎖要求、版面配置位移)，瞭解問題和可能的修正方式。

想進一步瞭解「成效深入分析」面板說明文件，請參閱逐步教學課程。

這是預先發布版功能，可協助網頁開發人員 (尤其是非效能專家) 找出及修正潛在的效能問題。我們的團隊正積極努力開發這項功能，希望您能提供意見回饋，協助我們打造更強大的功能。

Chromium 問題：1270700

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

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

以往，需要在「轉譯」分頁中模擬主題。

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

Chromium 問題：1314299

加強「網路預覽」分頁的安全性

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

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

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

加強「網路預覽」分頁的安全性

Chromium 問題：833147

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

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

舉例來說，在這個 React 示範中，指令碼之前在 ReactDOM 中斷點設定及重新載入時，指令碼會進入無限迴圈。「Sources」面板因無限迴圈而損壞。

繼續執行 JavaScript 會對開發人員造成大量問題，且可能會導致轉譯器處於損毀狀態。這項變更即可讓偵錯行為與 Firefox 等其他瀏覽器保持一致。

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

Chromium 問題：1014415、1004038、1112863、1134899

主控台更新

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

在主控台評估指令碼期間的錯誤現在會產生適當的錯誤事件，這類事件會觸發 window.onerror 處理常式，並在視窗物件上做為 "error" 事件分派。

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

Chromium 問題：1295750

使用 Enter 鍵修訂即時運算式

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

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

使用 Enter 鍵修訂即時運算式

Chromium 問題：1260744

一開始即取消使用者流程記錄

您可以在使用者流程記錄的開始時取消錄影。系統先前無法取消錄製內容。

一開始即取消使用者流程記錄

Chromium 問題：1257499

在「Styles」(樣式) 窗格中顯示沿用的醒目顯示虛擬元素

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

如規格中所述，當多個樣式發生衝突時，階層式設計會決定勝出的樣式。這項新功能可協助您瞭解規則的沿用機制和優先順序。

在「Styles」(樣式) 窗格中顯示沿用的醒目顯示虛擬元素

Chromium 問題：1024156

其他精選內容

這個版本的幾個重點修正如下：

  • 根據預設，「Properties」窗格現在會顯示含有值的存取子屬性。它之前藏錯了。(1309087)。
  • 「Styles」窗格現在可正確將覆寫的 @support 規則顯示為刪除線。規則先前並未加上刪除線。(1298025)。
  • 修正「Sources」面板中的 CSS 格式邏輯：編輯 CSS 時會導致多行空白。(1309588)。
  • 在主控台中，將物件的「以遞迴方式展開」選項上限設為 100 個，避免圓形物件永久啟動。(1272450)。

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

在這項實驗中，「Styles」窗格會以綠色醒目顯示 CSS 變更。您可以將滑鼠遊標懸停在已變更的規則上，然後按一下旁邊的新增複製按鈕，即可複製規則。

除此之外，若要複製宣告中的所有 CSS 變更，請在任一規則上按一下滑鼠右鍵，然後選取「複製所有 CSS 變更」。

「變更」分頁中也新增了「複製」按鈕，方便你追蹤及複製 CSS 變更內容！

複製 CSS 變更內容

Chromium 問題：1268754

[實驗功能] 選擇瀏覽器以外的顏色

啟用這項實驗，透過顏色挑選器選擇瀏覽器以外的顏色。以往，您只能在瀏覽器中選擇顏色。

在「Styles」窗格中，按一下任一顏色預覽畫面，即可開啟顏色挑選器。接著使用滴管工具挑選任何一處顏色。

選擇瀏覽器以外的顏色

Chromium 問題：1245191

下載預覽管道

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