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

Jecelyn Yeen
Jecelyn Yeen

以慣用語言使用開發人員工具

Chrome 開發人員工具現已支援超過 80 種語言，可讓你使用慣用的語言！

開啟「設定」，然後在「偏好設定」 >「語言」下拉式選單下方選取偏好的語言，然後重新載入開發人員工具。

偏好設定" width="800" height="494">

Chromium 問題：1163928

裝置清單中有新的 Nest Hub 裝置

您現在可以在裝置模式中模擬 Nest Hub 和 Nest Hub Max 的尺寸。

按一下「切換裝置工具列」切換裝置工具列，選取裝置清單下方的 Nest Hub 或 Nest Hub Max。

裝置模式下的 Nest Hub 裝置

Chromium 問題：1223525

在「Frame Details」(頁框詳細資料) 檢視畫面中進行來源試用

現在可以在「應用程式」面板的頁框詳細資料檢視畫面中，查看網站的來源試用相關資訊。

來源試用：您可以使用全新或實驗功能，讓所有使用者試用這項功能一段時間。

開啟有來源試用的頁面 (例如示範頁面)。在「Application」面板中，向下捲動至「Frames」部分，然後選取頂層頁框。

在「Frame Details」(頁框詳細資料) 檢視畫面中進行來源試用

Chromium 問題：607555

全新 CSS 容器查詢徽章

容器元素 (符合 @container at-rules 條件的祖系元素) 旁邊會新增一個容器徽章。按一下徽章，即可切換顯示所選容器的重疊顯示設定，以及該容器的所有查詢子系。

CSS 容器查詢徽章

Chromium 問題：1146422

新增核取方塊，可反轉網路篩選器

使用新的「反轉」核取方塊，反轉網路面板中的篩選器。

例如，輸入「status-code: 404」即可篩選狀態為 404 的網路要求。啟用「反轉」核取方塊來否定篩選條件 (顯示所有並非處於 404 狀態的網路要求)。

反轉網路篩選器

Chromium 問題：1054464

控制台側欄即將淘汰

移除控制台側欄，改為將篩選器使用者介面移至工具列。有任何疑慮或意見嗎？請透過這個 Issue Tracker 告訴我們。

控制台側欄淘汰訊息

Chromium 問題：1232937

在「問題」分頁和「網路」面板中顯示原始 Set-Cookie 標頭

開發人員工具現在會在「Issues」分頁中顯示原始 Set-Cookie 標頭。

先前，開發人員工具不會在網路面板中顯示格式錯誤的 Cookie (Set-Cookie 標頭不正確)。在「網路」面板中新增 response-header-set-cookie 篩選器後，使用者就能篩選原始的 Set-Cookie 標頭回應。開發人員工具會將「Issues」分頁中的原始 Set-Cookie 標頭連結至「Network」面板。

「問題」分頁和「網路」面板中的原始「Set-Cookie」標頭

Chromium 問題：1179186

在控制台中將原生存取子設為自有屬性

Console 現在會將原生存取子顯示為自己的屬性。

舉例來說，在控制台中評估 new Int8Array([1, 2, 3]) 運算式時，如 length 等原生存取子，byteOffset 就不會在預覽中顯示。本次更新���，預覽畫面會顯示原生存取子，並在展開時即時評估值。

在控制台中將原生存取子設為自有屬性

Chromium 問題：1076820、1199247

使用 #sourceURL 內嵌指令碼的適當錯誤堆疊追蹤

開發人員工具現在可以正確使用 #sourceURL 解析內嵌指令碼，並顯示適當的錯誤堆疊追蹤進行偵錯。

先前開發人員工具中的內嵌指令碼含有 #sourceURL (相對於前後文件)，而不是相對於開頭標記的 <script> 標記顯示的位置不正確。

使用 #sourceURL 內嵌指令碼的適當錯誤堆疊追蹤

Chromium 問題：1183990、578269

在「Computed」窗格中變更顏色格式

現在您可以在「運算」窗格中變更任何元素的顏色格式：Shift + 按一下顏色預覽畫面。

按住 Shift 鍵並按一下顏色預覽，即可變更顏色格式

Chromium 問題：1226371

將自訂工具提示替換為原生 HTML 工具提示

開發人員工具現已在所有元件中採用原生 HTML 工具提示。由於缺少原生 HTML 工具提示的樣式，開發人員工具已長期使用自訂工具提示。

不過，維護自訂工具提示的操作十分複雜，我們經常遇到複雜的錯誤。

重新提高自訂實作項目的優點後，我們發現原生 HTML 工具提示就足以滿足開發人員工具的需求，且採用工具提示可避免使用者遇到各種問題。

開發人員工具工具提示

Chromium 問題：1223391

[實驗功能] 在「問題」分頁中隱藏問題

啟用「隱藏問題選單」實驗功能，在「問題」分頁中隱藏問題。如此一來，您就能專心處理自己重視的重要問題。

在「問題」分頁中將遊標懸停在問題上，點選右側的問題選單 更多 和「隱藏類似問題」即可隱藏。

實驗性隱藏問題內容選單

Chromium 問題：1175722

下載預覽頻道

建議您使用 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