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

Kayce Basques
Kayce Basques
X GitHub

歡迎回來！Chrome 63 版開發人員工具即將推出下列新功能：

如要瞭解詳情，請繼續閱讀或觀看下方影片！

支援多重用戶端遠端偵錯

如果您曾嘗試透過 VS Code 或 WebStorm 等 IDE 偵錯應用程式，可能發現開啟開發人員工具會導致偵錯工作階段中斷。這個問題也導致無法使用開發人員工具偵錯 WebDriver 測試。

從 Chrome 63 開始，開發人員工具預設支援多個遠端偵錯用戶端，無須進行任何設定。

多重用戶端遠端偵錯是 crbug.com 上最熱門的開發人員工具問題，在整個 Chromium 專案中則排名第 3。多重用戶端支援也為整合其他工具與開發人員工具，或以新方式使用這些工具，開啟了許多有趣的商機。例如：

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

Workspace 2.0

開發人員工具中的工作區已推出一段時間，這項功能可讓您將開發人員工具當做 IDE 使用。您在開發人員工具中對原始碼進行變更，這些變更會保留在檔案系統中專案的本機版本。

Workspaces 2.0 以 1.0 為基礎，提供更實用的使用者體驗，並改善轉譯程式碼的自動對應功能。這項功能原定在 2016 年 Chrome 開發人員高峰會 (CDS) 後不久推出，但團隊為瞭解決一些問題而延後發布。

請觀看 CDS 2016 的 DevTools 講座，瞭解「撰寫」部分 (約 14:28) 的內容，看看 Workspace 2.0 的實際運作情形。

四項新稽核

在 Chrome 63 中，「稽核」面板新增了 4 項稽核：

  • 以 WebP 格式提供圖片。
  • 使用長寬比適當的圖片。
  • 避免使用包含已知安全漏洞的前端 JavaScript 程式庫。
  • 主控台記錄的瀏覽器錯誤。

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

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

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

開發人員工具已推出模擬推播通知功能一段時間，但有一項限制：您無法傳送自訂資料。不過，Chrome 63 的「Service Worker」窗格新增了「Push」文字方塊，現在可以進行這項操作。馬上試試：

  1. 前往「Simple Push Demo」。
  2. 按一下「啟用推播通知」。
  3. 當 Chrome 提示您允許通知時，請按一下「允許」。
  4. 開啟開發人員工具。
  5. 前往「Service Workers」(服務工作人員) 窗格。

  6. 在「Push」文字方塊中輸入內容。

    模擬含有自訂資料的推播通知。

    圖 1. 透過「Service Worker」窗格中的「Push」文字方塊，模擬含有自訂資料的推播通知。

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

    模擬推播通知

    圖 2. 模擬推播通知

使用自訂標記觸發背景同步事件

觸發背景同步事件已在「服務工作人員」窗格中存在一段時間，但現在您可以傳送自訂標記：

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

觸發自訂背景同步事件

圖 3. 按一下「同步」後，開發人員工具會將含有自訂標記的背景同步事件傳送至服務工作人員update-content

下載預覽版頻道

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

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

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

開發人員工具新功能

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