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. 聯播網設定。

下列選項已移至「聯播網設定」：Use Large Request Rows、「分組依據頁框」、Show Overview、Capture Screenshots。圖 3 顯示舊位置與新位置的對應關係。

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

如要針對這項 UI 變更提供意見，請前往 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 匯入和匯出功能一段時間。新版介面中，按鈕更容易找到。

圖 4. 新的 HAR 按鈕。

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

即時記憶體用量總計

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

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

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

如要針對這項新功能提供意見，請前往 Chromium 問題 #958177。

Service Worker 註冊通訊埠編號

「Service Workers」窗格的標題現在包含通訊埠編號，方便您追蹤正在偵錯的 Service Worker。

圖 6. Service Worker 通訊埠。

如要針對這項 UI 異動提供意見，請前往 Chromium 問題 #601286。

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

使用「Application」面板中新的「背景服務」部分，監控背景擷取和背景同步事件。由於 Background Fetch 和 Background Sync 事件是在背景發生，如果開發人員工具只在開啟時記錄這些事件，就沒什麼用處。因此，一旦開始記錄，即使關閉分頁或 Chrome，系統仍會繼續記錄 Background Fetch 和 Background Sync 事件。

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

圖 7. 「Background Fetch」窗格。Maxim Salnikov 的示範。

圖 8：「Background Sync」窗格。

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

Puppeteer for Firefox

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

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

歡迎觀看 Joel 和 Andrey 在 2019 年 Google I/O 大會上的 Puppeteer 演講，進一步瞭解 Puppeteer 和 Puppeteer for Firefox。Firefox 的公告時間約為 4:05。

下載預覽管道

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

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

您可以透過下列管道，討論新功能、更新或任何與開發人員工具相關的事項。

• 如要提供意見回饋和功能要求，請前往 crbug.com。
• 如要回報開發人員工具問題，請在開發人員工具中依序點選 more_vert「更多選項」 >「說明」 >「回報開發人員工具問題」。
• 在 Twitter 上發布推文並標記 @ChromeDevTools。
• 在 What's new in DevTools YouTube 影片或 DevTools Tips YouTube 影片中留言。

開發人員工具新功能

開發人員工具新功能系列文章涵蓋的所有內容清單。