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

Kayce Basques

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

自動完成 CSS 值

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

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

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

網路設定的新使用者介面

先前，如果開發人員工具視窗很窄，使用者就無法存取網路面板的選項 (例如節流選單)，為修正這個問題並簡化「網路」面板，我們已將幾個較少使用的選項移至新的「網路設定」窗格。

圖 2. 網路設定。

下列選項已移至「網路設定」：「使用大型要求列」、「依影格分組」、「顯示總覽」、「擷取螢幕截圖」。圖 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 匯入和匯出按鈕

使用新的「將所有內容儲存為 HAR」 和「匯入 HAR 檔案」 按鈕，更輕鬆地與同事分享網路記錄。開發人員工具已支援匯入及匯出 HAR 一段時間，新版介面會顯示更多按鈕，方便使用者操作。

圖 4. 新的 HAR 按鈕。

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

即時記憶體總用量

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

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

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

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

Service Worker 註冊通訊埠號碼

「Service Workers」窗格現在會在標題中顯示通訊埠號碼，方便您追蹤要偵錯的 Service Worker。

圖 6. Service Worker 通訊埠。

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

檢查 Background Fetch 和 Background Sync 事件

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

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

圖 7. 「Background Fetch」(背景擷取) 窗格。Maxim Salnikov 的示範。

圖 8：「背景同步」窗格。

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

適用於 Firefox 的 Puppeteer

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

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

如要進一步瞭解 Puppeteer 和 Puppeteer for Firefox，請觀看 Google 2019 年 I/O 大會中 Joel 和 Andrey 的 Puppeteer 說明。Firefox 公告大約在 4:05。

下載預覽版頻道

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

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。