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

Kayce Basques

歡迎回來！開發人員工具在 Chrome 63 版本中加入的功能包括：

，瞭解如何調查及移除這項存取權。

請繼續閱讀或觀看下方影片，瞭解更多資訊！

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

如果您曾嘗試過透過 VS Code 或 WebStorm 等 IDE 對應用程式進行偵錯，那麼您可能會非常 我們發現，開啟開發人員工具會妨礙偵錯工作階段。這個情況也讓 請使用開發人員工具對 WebDriver 測試進行偵錯。

自 Chrome 63 起，開發人員工具現已支援多個遠端偵錯用戶端， 後續設定

多重用戶端遠端偵錯是 crbug.com 上最常見的 開發人員工具問題 1。 整個 Chromium 專案中的數字 3多重客戶支援還增加了幾個 或將這些工具與開發人員工具整合 管理基礎架構例如：

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

Workspace 2.0

開發人員工具中的工作區已有一段時間。這項功能可讓您在 您的 IDE。您在開發人員工具中對原始碼做出變更後，相關變更將維持不變 安裝在檔案系統上

Workspaces 2.0 是以 1.0 版為基礎建構而成，提供更實用的使用者體驗，同時改善轉置的自動媒合功能 再也不是件繁重乏味的工作這項功能原定安排在 Chrome 開發人員高峰會結束後不久發布 (CDS) 2016 年，但團隊將工作時間延後來排除一些問題。

請參閱「創作」CDS 2016 年開發人員工具演講 (約 14:28) 主題中討論工作區 2.0 應用實例。

四項全新稽核報告

在 Chrome 63 中，「Audits」面板提供 4 項新的稽核：

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

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

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

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

在開發人員工具中的模擬推播通知已有一段時間，有一項限制： 無法傳送自訂資料但新的「Push」文字方塊會顯示在「Service Worker」窗格中 Chrome 63 現已推出。立即試用：

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

  6. 在「Push」文字方塊中輸入資訊，

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

    圖 1. 透過 「Service Worker」窗格

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

    模擬的推播通知

    圖 2. 模擬的推播通知

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

觸發背景同步處理事件的功能也在「Service Workers」窗格中已有一段時間，但 您現在可以傳送自訂代碼：

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

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

圖 3. 按一下「同步處理」後，開發人員工具就會傳送包含自訂代碼的背景同步處理事件 update-content 到 Service Worker

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。