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

Kayce Basques

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

根據 CSS 值自動完成

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

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

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

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

「網路」面板之前有可用性問題，也就是節流選單等選項 無法連上開發人員工具視窗。如要修正這個問題並清理網路面板配置， 「聯播網設定」將部分較少用的選項移到了新的選項中 窗格。

圖 2：網路設定。

下列選項已移至「Network Settings」：Use Large Request Rows、Group By 構圖、顯示總覽、拍攝螢幕截圖。圖 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」功能，更輕鬆地與同事分享網路記錄 和匯入 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 之後也不受影響

前往「應用程式」面板，開啟「背景擷取」或「背景同步處理」分頁，然後 按一下「Record」圖示 即可開始記錄 事件。按一下事件即可查看相關詳細資訊。

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

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

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

Firefox 專用 Puppeteer

Firefox 的 Puppeteer 是一項新的實驗性專案， 它能讓您使用 Puppeteer API。也就是說，您現在可透過相同的 Node API 自動執行 Firefox 和 Chromium。 相關範例

執行 node example.js 後，Firefox 會開啟，並將 page 文字插入搜尋框 文章。然後在 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 影片留言。

開發人員工具新功能

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