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

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

使用 CSS 值自動完成

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

輸入「bold」後,樣式窗格會自動輸入至「font-weight: bold」。

圖 1. 輸入 bold 後,「Styles」窗格便會自動完成至 font-weight: bold

請將這項新功能的意見提供給 Chromium 問題 #931145

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

網路面板先前出現可用性問題,導致開發人員工具視窗縮小時,無法存取節流選單等選項。為解決這個問題並整理「網路」面板的版面,我們將幾個較不常用的選項移到新的「Network Settings」窗格 「網路設定」按鈕 後方。

聯播網設定

圖 2. 聯播網設定。

下列選項已移至「Network Settings」:「Use Large Request Rows」、「Group By Frame」、「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 匯入和匯出按鈕

透過全新的「匯出全部為 HAR 內容」「匯出全部為 HAR 內容」 匯出匯入 HAR 檔案 匯入按鈕,讓您與同事輕鬆分享網路記錄。HAR 匯入和匯出功能已在開發人員工具中存在一段時間。更易發現的按鈕是新的異動。

全新的 HAR 按鈕。

圖 4. 全新的 HAR 按鈕。

如果您對這項 UI 變更的意見,歡迎向 Chromium 問題 #904585 提供意見。

即時記憶體總用量

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

即時記憶體總用量。

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

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

請將這項新功能的意見提供給 Chromium 問題 #958177

服務工作人員註冊通訊埠號碼

「Service Workers」窗格現在標題中加入通訊埠編號,可讓您更輕鬆地追蹤正在偵錯的 Service Worker。

Service Worker 通訊埠。

圖 6. Service Worker 通訊埠。

如果您對這項 UI 變更的意見,歡迎透過 Chromium 問題 #601286 提供意見。

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

使用「Application」面板上全新的「Background Services」區段,監控「Background 擷取」和「Background Sync」事件。由於 Background Fetch 和 Background Sync 事件是在背景發生,因此如果開發人員工具是在開發人員工具開啟的情況下才記錄背景擷取和背景同步事件,則不是非常實用。因此,一旦開始錄製,即使關閉分頁和 Chrome 關閉後,系統仍會持續記錄背景擷取事件和背景同步事件。

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

背景擷取窗格。

圖 7. 背景擷取窗格。示範Maxim Salnikov

「Background Sync」窗格。

圖 8:「Background Sync」窗格。

請將您對這些新功能的意見提供給 Chromium 問題 #927726

Puppeteer (適用於 Firefox)

Firefox 的 Puppeteer 是一個新的實驗性專案,可讓您透過 Puppeteer API 自動執行 Firefox。也就是說,您現在可以使用相同的 Node API 自動執行 Firefox 和 Chromium 作業,如下方影片所示。

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

請觀看 2019 年 Google I/O 大會的 JoelAndrey 主講的 Puppeteer 演講,進一步瞭解 Firefox 適用的 Puppeteer 和 Puppeteer。Firefox 公告將在 4:05 左右發生。

下載預覽管道

考慮使用 Chrome Canary 版開發人員版Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API,並在使用者使用之前就在網站上發現問題!

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

使用下列選項,討論文章的新功能和異動,以及其他與開發人員工具相關的事項。

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題,請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」
  • @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消

Chrome 81 版

Chrome 80 版

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59