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

Kayce Basques

你好！以下是 Chrome 76 版的 Chrome 開發人員工具新功能。

根據 CSS 值自動完成

在 DOM 節點中新增樣式宣告時，有時會比宣告名稱更容易記住宣告值。舉例來說，將 <p> 節點設為粗體時，bold 值比 font-weight 名稱更容易記住。樣式窗格的自動完成 UI 現在支援 CSS 值。如果您記得想要的關鍵字值，但忘記屬性名稱，請嘗試輸入值，自動完成功能應可協助您找到所需名稱。

輸入「bold」之後，「Styles」窗格會自動完成為「font-weight: bold」。

圖 1. 輸入 bold 後，「Styles」窗格就會自動完成 font-weight: bold。

請將您對這項新功能的意見傳送至 Chromium 問題 #931145。

全新的聯播網設定使用者介面

「網路」面板之前有可用性問題，導致開發人員工具視窗縮小時，無法連上節流選單等選項。為了修正這個問題並整理網路面板，我們已將幾個較不常用的選項移到新的「網路設定」「網路設定」按鈕窗格後方。

聯播網設定

圖 2. 網路設定。

下列選項已移至「Network Settings」：「Use Large Request Rows」、「Group By Frame」、「Show Overview」、「Capture Screenshots」。圖 3 將舊位置對應至新位置。

將舊位置對應至新位置。

圖 3. 將舊位置對應至新位置。

請針對這項使用者介面變更提供意見，並回報 Chromium 問題 #892969。

以 HAR 匯出的 WebSocket 訊息

從網路面板匯出 HAR 檔案以與同事分享網路記錄時，HAR 檔案現在會包含 WebSocket 訊息。_webSocketMessages 屬性的開頭是底線，表示這是自訂欄位。

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

請將您對這項新功能的意見傳送至 Chromium 問題 #496006。

HAR 匯入和匯出按鈕

使用全新的「Export All As HAR With Content」匯出 和「Import HAR File」匯入 按鈕，更輕鬆地與同事分享網路記錄。開發人員工具中的 HAR 匯入和匯出功能已有一陣子。更多易察覺的按鈕是新的變更。

新的 HAR 按鈕。

圖 4. 新的 HAR 按鈕。

請針對這項使用者介面變更提供意見，並回報 Chromium 問題 #904585。

即時記憶體總用量

「記憶體」面板現在會即時顯示記憶體總用量。

即時總記憶體用量。

圖 5. 「Memory」(記憶體) 面板底部會顯示頁面總共使用 43.4 MB 的記憶體。每秒 209 KB 表示記憶體總用量增加 209 KB。

另請參閱「效能監視器」，瞭解如何即時追蹤記憶體用量。

請針對這項新功能提供意見，回報為 Chromium 問題 #958177。

Service Worker 註冊通訊埠編號

「Service Workers」窗格現在會在標題中加入通訊埠編號，方便您追蹤自己偵錯的服務工作站。

Service Worker 通訊埠。

圖 6. Service Worker 通訊埠。

請針對這項使用者介面變更提供意見，並回報 Chromium 問題 #601286。

檢查背景擷取和背景同步處理事件

透過「Application」面板內新增的「背景服務」部分，您可以監控「背景擷取」和「背景同步處理」事件。由於背景擷取和背景同步處理事件發生在...背景，因此如果開發人員工具只在開發人員工具開啟時記錄背景擷取和背景同步處理事件，就沒有太大的幫助。因此，一旦開始錄影，即使之後關閉分頁或 Chrome 關閉，系統還是會繼續記錄背景擷取和背景同步事件。

前往「Application」面板，開啟「Background Fetch」或「Background 同步」分頁，然後按一下「Record」圖示 記錄 開始記錄事件。按一下事件即可查看相關詳細資訊。

背景擷取窗格。

圖 7. 背景擷取窗格。客層：Maxim Salnikov。

背景同步處理窗格。

圖 8：背景同步處理窗格。

請針對這些新功能提供意見，並回報給 Chromium 問題 #927726。

Firefox 專用 Puppeteer

Firefox 的 Puppeteer 是一項新的實驗性專案，可讓您透過 Puppeteer API 自動處理 Firefox。也就是說，您現在只要使用相同的 Node API，就能自動執行 Firefox 和 Chromium，如下方影片所示。

執行 node example.js 後，Firefox 會開啟，並將 page 文字插入 Puppeteer 說明文件網站的搜尋框中。然後在 Chromium 中重複相同的工作。

觀看 Joel 和 Andrey 自 2019 年 Google I/O 大會的 Puppeteer 演講，進一步瞭解 Firefox 適用的 Puppeteer 和 Puppeteer。Firefox 公告會在 4:05 左右啟動。

下載預覽頻道

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