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

Kayce Basques

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

使用 CSS 值的自動完成功能

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

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

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

如對這項新功能有任何意見，請前往 Chromium 問題 #931145 提供意見。

網路設定的新 UI

網路面板先前有可用性問題，當開發人員工具視窗縮小時，會無法存取節流選單等選項。為修正這個問題並簡化「Network」面板，我們將幾個較少使用的選項移至新的「Network Settings」「網路設定」按鈕 面板。

網路設定

圖 2：網路設定。

下列選項已移至「網路設定」：使用大型要求列、依框架分組、顯示總覽、擷取螢幕截圖。圖 3 將舊位置對應至新位置。

將舊位置對應至新位置。

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

如對這項 UI 變更有任何意見，請前往 Chromium 問題 #892969 提供意見。

HAR 匯出檔案中的 WebSocket 訊息

從「Network」面板匯出 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 按鈕。

如對這項 UI 變更有任何意見，請前往 Chromium 問題 #904585 提供意見。

即時總記憶體用量

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

即時記憶體總用量。

圖 5. 記憶體面板底部顯示，網頁總共使用 43.4 MB 的記憶體。209 KB/s 表示總記憶體用量每秒增加 209 KB。

如要即時追蹤記憶體用量，請參閱效能監視器。

如對這項新功能有任何意見，請前往 Chromium 問題 #958177 提出意見。

Service Worker 註冊連接埠號碼

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

Service worker 通訊埠。

圖 6. Service worker 通訊埠。

如對這項 UI 變更有任何意見，請前往 Chromium 問題 #601286 提供意見。

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

您可以使用「Application」面板中的全新「Background Services」部分，監控「Background Fetch」和「Background Sync」 事件。由於背景擷取和背景同步處理事件會在... 嗯... 背景中發生，如果 DevTools 只在開啟時記錄背景擷取和背景同步處理事件，就不會太有用。因此，一旦開始錄製，系統就會持續記錄背景擷取和背景同步處理事件，即使關閉分頁或 Chrome 也不例外。

前往「Application」面板，開啟「Background Fetch」或「Background Sync」分頁標籤，然後按一下「Record」記錄 開始記錄事件。按一下事件即可查看更多相關資訊。

「Background Fetch」窗格。

圖 7. 「Background Fetch」窗格。示範影片，由 Maxim Salnikov 提供。

「Background Sync」窗格。

圖 8：「Background Sync」窗格。

如對這些新功能有任何意見，請前往 Chromium 問題 #927726 提供意見。

Firefox 適用的 Puppeteer

Puppeteer for Firefox 是新的實驗性專案，可讓您透過 Puppeteer API 自動化 Firefox。換句話說，您現在可以使用相同的 Node API 自動化 Firefox 和 Chromium，如以下影片所示。

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

歡迎觀看 Joel 和 Andrey 在 2019 年 Google I/O 大會上發表的 Puppeteer 相關演講，進一步瞭解 Puppeteer 和 Firefox 版 Puppeteer。Firefox 的廣告會在 4:05 左右播出。

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。