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

Kayce Basques

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

控制台現在支援重新宣告 let 和 class 陳述式。對於使用控制台嘗試新的 JavaScript 程式碼的網頁開發人員而言，無法重新宣告是常見的惱人問題。

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

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

主控台現在允許重新宣告：

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

Chromium 問題 #1004193

改善 WebAssembly 偵錯功能

DevTools 已開始支援 DWARF 偵錯標準，這表示在 DevTools 中，針對原始語言的程式碼步進、設定中斷點和解析堆疊追蹤的支援功能已增強。如要瞭解詳情，請參閱「Chrome DevTools 中的 WebAssembly 偵錯功能已改善」。

新的 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

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

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

網路面板中新 Path 和網址欄的螢幕截圖。

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

Chromium 問題 #993366

更新的 User-Agent 字串

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

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

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

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

Chromium 問題 #1029031

「稽核」面板更新

新版設定 UI

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

新的設定 UI。

涵蓋率分頁更新

個別函式或個別區塊的涵蓋率模式

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

覆蓋率模式下拉式選單。

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

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

Chromium 問題 #1004203

下載預覽管道

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

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

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

開發人員工具的新功能

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