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

歡迎回來!Chrome 63 版開發人員工具即將推出新功能:

請閱讀或觀看下方影片瞭解詳情!

支援多重用戶端遠端偵錯功能

如果您曾經嘗試透過 VS Code 或 WebStorm 等 IDE 對應用程式進行偵錯,可能已經發現開啟開發人員工具會破壞偵錯工作階段。這項問題也使您無法使用開發人員工具對 WebDriver 測試進行偵錯。

自 Chrome 63 版起,開發人員工具現在預設支援多個遠端偵錯用戶端,無須進行設定。

多用戶端遠端偵錯是 crbug.com 中最受歡迎的開發人員工具問題之一,以及整個 Chromium 專案第 3 名。多重用戶端支援也開啟了一些有趣的機會,可讓整合其他工具與開發人員工具,或以新的方式使用這些工具。例如:

  • 現在,通訊協定用戶端 (例如 VS Code 和 Webrush 的 Chrome 偵錯擴充功能) 以及 Puppeteer 等 WebSocket 用戶端 (例如 Puppeteer) 現在可以與開發人員工具同時執行。
  • Puppeteerchrome-remote-interface 等兩個獨立的 WebSocket 通訊協定用戶端現在可同時連線至相同分頁。
  • 使用 chrome.debugger API 的 Chrome 擴充功能現在可與開發人員工具同時執行,
  • 多個不同的 Chrome 擴充功能現在可在同一分頁中同時使用 chrome.debugger API。

工作區 2.0

在開發人員工具中已推出一段時間,這項功能可讓您將開發人員工具做為 IDE。您可以在開發人員工具中對原始碼進行一些變更,且這些變更會保存在檔案系統中專案的本機版本。

Workspace 2.0 版以 1.0 版為基礎,提供更優質的使用者體驗,同時改善了已轉譯程式碼的自動對應功能。這項功能原本預計在 2016 年 Chrome 開發人員高峰會 (CDS) 不久後推出,但相關團隊已延後解決部分問題。

查看 CDS 2016 年 CDS 開發人員工具演講的「編寫」部分 (約 14:28),瞭解 Workspaces 2.0 的實際運作情形。

四項全新稽核

在 Chrome 63 中,「稽核」面板提供 4 項新稽核項目:

  • 提供圖片為 WebP 格式。
  • 使用顯示比例適當的圖片。
  • 請避免使用有已知安全漏洞的前端 JavaScript 程式庫。
  • 控制台記錄瀏覽器錯誤。

請參閱「在 Chrome 開發人員工具中執行 Lighthouse」一文,瞭解如何使用「稽核」面板提升網頁品質。

如要進一步瞭解支援「稽核」面板的專案,請參閱 Lighthouse 一文。

透過自訂資料模擬推播通知

在開發人員工具中模擬推播通知的使用時間已有一段時間,但有一項限制:您無法傳送自訂資料。不過,Chrome 63 的「Service Worker」窗格提供新的「Push」文字方塊,您現在可以使用這項功能。立即試用:

  1. 前往簡易推送示範
  2. 按一下「啟用推播通知」
  3. 在 Chrome 提示您允許通知時,按一下「允許」
  4. 開啟開發人員工具。
  5. 前往「Service Workers」窗格。
  6. 在「推播」文字方塊中輸入內容。

    使用自訂資料模擬推播通知。

    圖 1:透過「Service Worker」窗格中的「Push」文字方塊,以自訂資料模擬推播通知

  7. 按一下「推送」即可傳送通知。

    模擬推播通知

    圖 2:模擬推播通知

使用自訂代碼觸發背景同步處理事件

觸發背景同步處理事件也已位於「Service Workers」窗格中一段時間,但您現在可以傳送自訂標記:

  1. 開啟開發人員工具。
  2. 前往「Service Workers」窗格。
  3. 在「同步處理」文字方塊中輸入一些文字。
  4. 按一下 [Sync] (同步處理)

觸發自訂背景同步處理事件

圖 3:按一下「Sync」後,開發人員工具會將包含自訂標記 update-content 的背景同步處理事件傳送至 Service Worker

下載預覽管道

考慮使用 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