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

Jecelyn Yeen

預覽功能：全新效能深入分析面板

使用「成效洞察」面板，取得根據實務及實際應用情況進行的網站成效洞察資料。

開啟面板，並根據所需用途開始新的錄製內容。舉例來說，你可以評估這個示範頁面的網頁載入量。

全新效能洞察面板

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

前往「效能洞察」面板說明文件，透過逐步教學課程瞭解更多資訊。

這個預先發布版功能可協助網頁程式開發人員 (尤其是非效能專家) 找出並修正潛在的效能問題。我們的團隊正積極努力開發這項功能，因此歡迎你提供意見回饋，以利我們進一步強化相關功能。

Chromium 問題：1270700

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

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

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

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

Chromium 問題：1314299

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

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

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

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

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

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 變更

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

此外，您也可以在任一規則上按一下滑鼠右鍵，然後選取「複製所有 CSS 變更內容」，即可複製各個宣告中所有的 CSS 變更。

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

複製 CSS 變更內容

Chromium 問題：1268754

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

啟用這項實驗功能，即可使用顏色挑選器在瀏覽器外選擇顏色。以往您只能在瀏覽器中挑選顏色。

在「Styles」窗格中，點選任一顏色預覽畫面，即可開啟顏色挑選器。你可以使用滴管從任何位置挑選顏色。

在瀏覽器外選擇顏色

Chromium 問題：1245191

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 在開發人員工具中，依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具問題」，回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google 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