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

歡迎！Chrome 60 開發人員工具的新功能和重大變更包括：

• 新的「稽核」面板，包括漸進式網頁應用程式、效能、無障礙設計和最佳做法的測試。
• 第三方徽章：找出哪些第三方正在發出網路要求、記錄至控制台，以及執行 JavaScript。
• 點選「繼續前往此處」。這項全新手勢可加快 JavaScript 偵錯工作流程。
• 可預測的非同步 JavaScript 偵錯功能。
• 控制台中的物件預覽畫面。
• 「涵蓋率」分頁中的即時更新資訊。
• 在控制台中新增選單，用於選取內容。
• 簡化網路節流選項。
• 非同步堆疊追蹤預設為開啟。

請觀看下方影片，瞭解這些發布說明的內容，或繼續閱讀本文。

新功能

由 Lighthouse 提供支援的新稽核面板

稽核面板現在採用 Lighthouse 技術。Lighthouse 提供一組完整的測試，可評估網頁品質。

頂端的漸進式網頁應用程式、成效、無障礙設計和最佳做法分數，是您在各個類別的總分。報表的其餘部分則會列出決定分數的各項測試。修正失敗的測試，改善網頁品質。

圖 1. Lighthouse 報表

如要稽核網頁，請按照下列步驟操作：

1. 按一下「Audits」分頁標籤。
2. 按一下「Perform an audit」。
3. 按一下「執行稽核」。Lighthouse 會設定 DevTools 來模擬行動裝置，針對網頁執行多項測試，然後在「Audits」面板中顯示結果。

Google I/O 2017 大會的 Lighthouse

請參閱下方 2017 年 Google I/O 大會的開發人員工具演講，進一步瞭解 Lighthouse 在開發人員工具中的整合方式。

為 Lighthouse 貢獻心力

Lighthouse 是開放原始碼專案。如要進一步瞭解 Lighthouse 的運作方式和貢獻方式，請參閱下方 Google I/O 2017 的 Lighthouse 講座。

有 Lighthouse 稽核相關想法嗎？請在這裡貼文！

第三方徽章

使用第三方徽章，進一步瞭解在網頁上提出網路要求、記錄至主控台及執行 JavaScript 的實體。

圖 2. 將滑鼠游標懸停在「聯播網」面板中的第三方徽章上

圖 3. 在控制台中將滑鼠游標懸停在第三方徽章上

如要啟用第三方徽章，請按照下列步驟操作：

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

請使用「通話樹狀圖」和「自下而上」分頁中的「按產品分組」選項，依據造成活動的第三方實體將成效記錄活動分組。請參閱「開始分析執行階段效能」，瞭解如何使用開發人員工具分析效能。

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

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

假設你暫停在指令碼的第 25 行，但想跳到第 50 行。過去，您可以在第 50 行設定中斷點，或在該行上按一下滑鼠右鍵，然後選取「繼續到這裡」。不過，現在有更快速的手勢可用於處理這個工作流程。

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

圖 5：繼續前往

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

逐步執行非同步作業

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

「繼續至此處」的新手勢也適用於非同步程式碼。按住 Command 鍵 (Mac) 或 Control 鍵 (Windows、Linux) 時，開發人員工具會以綠色標示可跳轉的非同步目的地。

請參考以下 DevTools 在 I/O 的演講內容，瞭解相關示範。

異動

控制台中提供更實用的物件預覽畫面

過去，當您在控制台中記錄或評估物件時，控制台只會顯示 Object，這對您來說並沒有太大幫助。控制台現在會提供更多物件內容資訊。

圖 6. 主控台如何用於預覽物件

圖 7. 管理中心現在如何預覽物件

主控台中更實用的內容選取選單

控制台的內容選取選單現在提供更多可用內容的相關資訊。

• 標題會說明每個項目的內容。
• 標題下方的副標題會說明項目的來源網域。
• 將滑鼠游標懸停在 iframe 內容上，即可在可視區域中醒目顯示該內容。

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

「涵蓋範圍」分頁中的即時更新

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

圖 9. 使用舊版「涵蓋率」分頁載入及與網頁互動

圖 10. 使用新的「涵蓋率」分頁載入網頁並與其互動

簡化網路節流選項

我們已簡化「網路」和「效能」面板中的網路節流選單，只保留三個選項：離線、慢速 3G (印度等地常見) 和快速 3G (美國等地常見)。

圖 11. 新的網路節流選項

我們已調整節流選項，以配合其他核心層級節流工具。由於這些值會造成誤解，因此 DevTools 不再在每個選項旁邊顯示延遲、下載和上傳指標。目標是比對每個選項的實際體驗。

非同步堆疊預設為開啟

「Sources」面板已移除「Async」核取方塊。非同步堆疊追蹤現在預設為開啟。過去，這個選項是自選選項，因為它會造成效能負擔。這項功能的開銷現在已降到最低，可預設啟用。如果您想停用非同步堆疊追蹤，可以在「設定」中關閉，或在「指令選單」中執行 Do not capture async stack traces 指令。

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

請觀看下方 Paul Irish 的演講，進一步瞭解開發人員工具團隊過去一年的工作內容，以及他們近期要處理的重要主題。

下載預覽管道

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

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

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

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「more_vert」more_vert更多選項 >「Help」 >「Report a DevTools issue」，即可回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具的新功能

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