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

歡迎!Chrome 60 開發人員工具即將推出的新功能和重大異動包括:

請參閱下方版本資訊,或繼續閱讀以瞭解詳情。

新功能

採用 Lighthouse 技術的全新稽核面板

Audits 面板現在採用 Lighthouse。Lighthouse 提供一套全面的測試,可用來評估網頁的品質。

漸進式網頁應用程式效能無障礙功能最佳做法,最上方的分數是各類別的匯總分數。報表的其他部分會詳細列出判定分數的各項測試。修正失敗的測試,改善網頁品質。

Lighthouse 報告

圖 1:Lighthouse 報告

如何稽核網頁:

  1. 按一下「Audits」分頁標籤。
  2. 按一下「執行稽核」
  3. 按一下「執行稽核」。Lighthouse 設定了 開發人員工具來模擬行動裝置、針對網頁執行多項測試,並在「Audits」面板中顯示結果。

2017 年 Google I/O 大會燈塔

請查看下方 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」(依產品分組) 選項,將導致活動的第三方實體的效能記錄分組。如要瞭解如何使用開發人員工具分析效能,請參閱「開始使用分析執行階段效能」。

在「Bottom-Up」分頁中依產品分組

圖 4 在「Bottom-Up」分頁中依產品分組

「繼續前往這裡」的新手勢

假設您已暫停指令碼第 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」(印度等地區很常見),以及「Fast 3G」(美國等地點很常見)。

新的網路節流選項

圖 11. 新的網路節流選項

節流選項已經過調整,以符合其他核心層級的節流工具。開發人員工具不會再於每個選項旁邊顯示延遲時間、下載和上傳指標,因為這些值會造成誤導。目標是讓每個選項的實際體驗發揮到淋漓盡致。

預設開啟非同步堆疊

「來源」面板已移除「非同步」核取方塊。系統現在預設會啟用非同步堆疊追蹤。過去,由於效能負擔,這是選用這個選項。現在負擔夠低,這樣才能預設啟用這項功能。如要停用非同步堆疊追蹤,您可以在「設定」中停用這些堆疊追蹤,或是在「指令」選單中執行 Do not capture async stack traces 指令。

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

請查看下方關於 Paul Ireland 的神話人物談話,進一步瞭解開發人員工具團隊過去一年所進行的工作計畫,以及他們近期要處理的重大主題。

下載預覽管道

考慮使用 Chrome Canary 版開發人員版Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API,並在使用者使用之前就在網站上發現問題!

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

使用下列選項,討論文章的新功能和異動,以及其他與開發人員工具相關的事項。

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題,請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」
  • @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

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 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消

Chrome 81 版

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