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

歡迎！開發人員工具為 Chrome 60 版的最新功能與重大異動包括：

• 新增「稽核」面板，包括漸進式網頁應用程式、效能、無障礙功能和 最佳做法
• 第三方徽章。找出哪些第三方正在發出網路要求，然後登入 並執行 JavaScript
• 繼續前往此處。可加快 JavaScript 偵錯工作流程的新手勢。
• 適用於非同步 JavaScript 的預測偵錯功能。
• 在控制台中預覽物件。
• 「涵蓋範圍」分頁即時更新。
• 用於在主控台中選取背景資訊的新選單。
• 簡化網路節流選項。
• 預設啟用非同步堆疊追蹤。

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

下面提供版本資訊的影片版本，或是繼續閱讀，進一步瞭解詳情。

新功能

新版稽核面板採用 Lighthouse 技術

「稽核」面板現在採用 Lighthouse 技術。Lighthouse 提供一系列 可以測試評估網頁品質的測試。

頂端的「Progressive Web App」(漸進式網頁應用程式)、Performance (效能) 的分數。 無障礙功能和最佳做法則是各項指標的匯總分數 類別報告的其餘部分則會針對判定您分數的每個測驗細分。 修正失敗的測試，改善網頁品質。

圖 1. Lighthouse 報告

如何稽核網頁：

1. 按一下「稽核」分頁標籤。
2. 按一下「執行稽核」。
3. 按一下「執行稽核」。Lighthouse 設定了開發人員工具來模擬行動裝置，且執行多種 ，然後在「Audits」(稽核) 面板中顯示結果。

2017 年 Google I/O 大會的 Lighthouse

歡迎觀看下方 2017 年 Google I/O 大會的開發人員工具講座，進一步瞭解 Lighthouse 的整合功能 。

為 Lighthouse 做出貢獻

Lighthouse 是開放原始碼專案。歡迎進一步瞭解這項功能的運作方式，以及如何在 ，請觀看下方 2017 年 Google I/O 大會的 Lighthouse 演講。

您對 Lighthouse 稽核有意見了嗎？請在這裡張貼！

第三方徽章

使用第三方徽章即可深入瞭解在叢集內發出網路要求的實體 並執行 JavaScript。

圖 2. 將滑鼠遊標懸停在網路面板中的第三方徽章上

圖 3. 將滑鼠遊標懸停在主控台的第三方徽章上

啟用第三方徽章的步驟如下：

1. 開啟「指令選單」。
2. 請執行 Show third party badges 指令。

使用「Call Tree」和「Bottom-Up」分頁中的「分組依據產品」選項，將成效分組 記錄造成活動的第三方實體活動。請參閱開始使用 分析執行階段效能，瞭解如何使用開發人員工具分析效能。

圖 4. 在「由下而上」分頁中依產品分組

「繼續前往此處」的新手勢

假設您暫停在指令碼的第 25 行，想要跳到第 50 行。過去，您可以 在第 50 行設定中斷點，或在行上按一下滑鼠右鍵並選取「繼續前往此處」。但現在 還有更快的手勢處理這個工作流程

逐步執行程式碼時，按住 Command (Mac) 或 Control (Windows、Linux) 並 然後按一下，即可繼續瀏覽該行程式碼開發人員工具會以藍色醒目顯示可跳轉的目的地。

圖 5：繼續前往此處

請參閱「開始使用 JavaScript 偵錯」，瞭解開發人員工具中的偵錯基本概念。

執行非同步

開發人員工具團隊近期的一大主題是針對非同步程式碼進行偵錯 並提供完整的非同步執行歷史記錄。

「前往此處」的新手勢也適用於非同步程式碼。當您按住 Command (Mac) 或 Control (Windows、Linux)、開發人員工具醒目顯示可跳轉 綠色非同步目的地

請觀看下方 I/O 大會現場工具說明的示範影片。

異動

在控制台中預覽更豐富的物件

過去，您於控制台中記錄或評估物件時，控制台只會顯示 Object，這些資訊對我沒有幫助。現在，控制台會提供 物件內容

圖 6. 如何使用控制台預覽物件

圖 7. 控制台如何預覽物件

控制台提供更詳盡的內容選項選單

控制台的「內容選取」選單現在提供更多可用背景資訊的資訊。

• 標題可以說明每個項目的名稱。
• 標題下方的子標題代表該項目的來源網域。
• 將滑鼠遊標懸停在 iframe 內容上，即可在可視區域中醒目顯示。

圖 8. 在新的「內容選項」選單中，將遊標懸停在 iframe 上方， 可視區域

「涵蓋範圍」分頁即時更新資訊

在 Chrome 59 中記錄程式碼涵蓋率時，「涵蓋率」分頁只會顯示「正在錄製...」。 但無法查看所使用的程式碼現在，「涵蓋範圍」分頁會顯示即時資訊 所用的程式碼

圖 9. 透過舊版「涵蓋範圍」分頁載入頁面並進行互動

圖 10. 透過全新的「涵蓋範圍」分頁載入頁面並進行互動

更精簡的網路節流選項

「Network」(網路) 和「Performance」(效能) 面板中的網路節流選單經過簡化， 只包含三個選項：「離線」、「慢速 3G」 (適用於印度等地) 及 高速 3G 網路 (適用於美國等地)。

圖 11. 新的網路節流選項

節流選項經過調整，以配合其他核心層級的節流工具。開發人員工具否 「時間範圍較長」會顯示延遲時間、下載和上傳指標 具有誤導性目標是符合每個選項的實際經驗。

預設開啟非同步堆疊

已從「來源」Async面板移除「非同步」Async核取方塊。非同步堆疊追蹤現在會由 預設值。過去這個選項是因效能負擔而選擇採用。現在負擔 最低可啟用該功能。如果您想停用非同步堆疊追蹤， 你可以前往設定頁面或執行 Do not capture async stack traces 開啟「Command」選單。

2017 年 Google I/O 大會的開發人員工具

歡迎觀看下方由神話保羅愛爾蘭 (Paul Ireland) 講述的演講，進一步瞭解開發人員工具團隊的功能 我們這一年來的努力，以及這些團隊近期在處理的重要主題。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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