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

Kayce Basques

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

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

新功能

新版稽核面板採用 Lighthouse 技術

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

Progressive Web App、Performance、Accessibility 和 Best Practices 頂端的分數是各類別的匯總分數。報告的其餘部分則會針對判定您分數的每個測驗細分。修正失敗的測試，改善網頁品質。

Lighthouse 報告

圖 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」分頁中的「Group by product」選項，為造成活動的第三方實體將效能記錄活動分組。請參閱「開始分析執行階段效能」，瞭解如何使用開發人員工具分析效能。

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

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

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

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

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

繼續前往這裡

圖 5：繼續前往此處

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

執行非同步

開發人員工具團隊近期的一個重要主題是，讓非同步程式碼的偵錯功能可以預測，並提供非同步執行的完整記錄。

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

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

異動

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

以往，您在主控台中記錄或評估物件時，主控台只會顯示 Object，這並不會特別實用。現在主控台提供更多關於物件內容的資訊。

如何使用控制台預覽物件

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

控制台如何預覽物件

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

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

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

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

全新的內容選項選單

圖 8. 在新的「內容選取」選單中，將滑鼠遊標懸停在 iframe 上，即可在可視區域醒目顯示該 iframe

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

在 Chrome 59 中記錄程式碼涵蓋率時，「Coverage」分頁只會顯示「Recording...」，無法讓您瞭解所使用的程式碼。現在，「Coverage」分頁會即時顯示目前使用的程式碼。

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

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

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

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

更精簡的網路節流選項

「Network」(網路) 和「Performance」(效能) 面板中的網路節流選單經過簡化，僅包含三個選項：「離線」、「慢 3G」和「快速 3G」(在印度等地方常見)。

新的網路節流選項

圖 11. 新的網路節流選項

節流選項經過調整，以配合其他核心層級的節流工具。開發人員工具不會再於每個選項旁邊顯示延遲、下載和上傳指標，因為這些值會誤導使用者。目標是符合每個選項的實際經驗。

預設開啟非同步堆疊

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

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

歡迎觀看下方由神話保羅愛爾蘭 (Paul Ireland) 發表的演說，進一步瞭解開發人員工具團隊過去一年的努力，以及近期研究的重要主題。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google 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