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

Kayce Basques

歡迎回來！Chrome 63 版開發人員工具的新功能包括：

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

支援多個用戶端的遠端偵錯功能

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

自 Chrome 63 起，開發人員工具現在預設支援多個遠端偵錯用戶端，不需要進行設定。

多用戶端遠端偵錯是 crbug.com 上最受歡迎的開發人員工具問題第 1 名，也是整個 Chromium 專案的第 3 名。多用戶端支援功能也為整合其他工具與 DevTools 或以新方式使用這些工具開啟了許多有趣的機會。例如：

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

工作區 2.0

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

Workspaces 2.0 是 1.0 的進階版本，提供更實用的使用者體驗，並改善轉譯程式碼的自動對應功能。這項功能原本預計在 2016 年 Chrome 開發人員大會 (CDS) 後不久推出，但團隊為瞭解決一些問題，將推出時間延後。

請參閱 CDS 2016 開發人員工具演講的「Authoring」部分 (約 14:28)，瞭解工作區 2.0 的實際運作情形。

四項新的稽核

在 Chrome 63 中，「稽核」面板有 4 項新的稽核項目：

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

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

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

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

在 DevTools 中模擬推播通知已經一段時間了，但有一個限制：您無法傳送自訂資料。不過，Chrome 63 的「Service Worker」窗格中新增了「Push」文字方塊，讓您可以執行這項操作。馬上試試：

  1. 前往「簡易推播示範」。
  2. 按一下「啟用推播通知」。
  3. Chrome 提示你允許通知時，請按一下「允許」。
  4. 開啟開發人員工具。
  5. 前往「Service Workers」窗格。

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

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

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

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

    模擬的推播通知

    圖 2. 模擬的推播通知

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

觸發背景同步事件功能也已在「Service Workers」窗格中提供一段時間，但現在您可以傳送自訂標記：

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

觸發自訂背景同步事件

圖 3. 點選「Sync」後，開發人員工具會將背景同步處理事件傳送至服務工作者，其中包含自訂標記 update-content

下載預覽管道

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

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

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

開發人員工具的新功能

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