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

你好!以下是 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 中重複相同的工作。

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

下載預覽管道

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

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

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

開發人員工具的新功能

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