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

Kayce Basques
Kayce Basques
X GitHub

主控台支援 let 和 class 重新宣告

控制台現在支援重新宣告 let 和 class 陳述式。對於使用控制台實驗新 JavaScript 程式碼的網頁開發人員來說，無法重新宣告是常見的困擾。

舉例來說，先前使用 let 重新宣告本機變數時，控制台會擲回錯誤：

Chrome 78 的「控制台」螢幕截圖，顯示 let 重新宣告失敗。

現在，Console 允許重新宣告：

Chrome 80 的控制台螢幕截圖，顯示 let 重新宣告成功。

Chromium 問題 #1004193

改善 WebAssembly 偵錯功能

開發人員工具已開始支援 DWARF 偵錯標準，這表示開發人員工具將更全面支援逐步執行程式碼、設定中斷點，以及在來源語言中解析堆疊追蹤。如要瞭解完整資訊，請參閱「Improved WebAssembly debugging in Chrome DevTools」。

以 DWARF 為基礎的新版 WebAssembly 偵錯功能螢幕截圖。

網路面板更新

「發起人」分頁中的要求發起人鏈

您現在可以將網路要求的發起者和依附元件視為巢狀清單。這有助於瞭解資源的請求原因，或特定資源 (例如指令碼) 造成的網路活動。

「啟動器」分頁中的要求啟動器鏈結螢幕截圖

在「Network」面板中記錄網路活動後，按一下資源，然後前往「Initiator」分頁標籤，即可查看資源的「Request Initiator Chain」：

  • 檢查的資源會以粗體顯示。在上方的螢幕截圖中，https://web.dev/default-627898b5.js 是檢查的資源。
  • 檢查資源上方的資源是「啟動器」。在上述螢幕截圖中，https://web.dev/bootstrap.js 是 https://web.dev/default-627898b5.js 的啟動器。換句話說，https://web.dev/bootstrap.js導致了 https://web.dev/default-627898b5.js 的網路要求。
  • 受檢查資源下方的資源是依附元件。在上述螢幕截圖中，https://web.dev/chunk-f34f99f7.js 是 https://web.dev/default-627898b5.js 的依附元件。換句話說，https://web.dev/default-627898b5.js導致https://web.dev/chunk-f34f99f7.js的網路要求。

Chromium 問題 #842488

在「總覽」中醒目顯示所選網路要求

點選網路資源進行檢查後，「網路」面板會在「總覽」中，以藍色邊框標示該資源。這有助於您偵測網路要求是否發生得比預期早或晚。

「總覽」窗格的螢幕截圖，其中醒目顯示檢查的資源。

Chromium 問題 #988253

「網路」面板中的網址和路徑欄

在「網路」面板中使用新的「路徑」和「網址」欄，查看每個網路資源的絕對路徑或完整網址。

螢幕截圖：網路面板中的新「路徑」和「網址」欄。

在「瀑布圖」表格標題上按一下滑鼠右鍵，然後選取「路徑」或「網址」，即可顯示新資料欄。

Chromium 問題 #993366

更新使用者代理程式字串

開發人員工具支援透過「網路狀況」分頁設定自訂 User-Agent 字串。User-Agent 字串會影響附加至網路資源的 User-Agent HTTP 標頭，以及 navigator.userAgent 的值。

預先定義的 User-Agent 字串已更新，可反映新式瀏覽器版本。

「網路狀況」分頁中的「使用者代理程式」選單螢幕截圖。

如要存取「網路狀況」，請開啟「指令」選單，然後執行 Show Network Conditions 指令。

Chromium 問題 #1029031

「稽核」面板更新

新版設定 UI

設定使用者介面採用新的回應式設計，並簡化了節流設定選項。如要進一步瞭解節流 UI 的變更，請參閱「稽核面板節流」。

新的設定使用者介面。

「涵蓋範圍」分頁更新

依函式或依區塊涵蓋模式

「涵蓋範圍」分頁新增了下拉式選單，可供您指定要依函式或依區塊收集程式碼涵蓋範圍資料。每個街區的涵蓋範圍更詳細，但收集成本也高出許多。開發人員工具現在預設會使用「每個函式」涵蓋範圍。

「涵蓋範圍模式」下拉式選單。

涵蓋範圍現在必須透過重新載入頁面來啟動

由於涵蓋率資料不可靠，因此系統已移除在不重新載入網頁的情況下切換程式碼涵蓋率的功能。舉例來說，如果函式執行時間已久，且 V8 的垃圾收集器已清除該函式，系統可能會將其回報為未使用。

Chromium 問題 #1004203

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。