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

控制台支援 letclass 宣告

Console 現在支援重新宣告 letclass 陳述式。無法重新宣告 對網頁程式開發人員來說,透過控制台試用新的 JavaScript 會很常見 再也不是件繁重乏味的工作

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

Chrome 78 版 Play 管理中心的螢幕截圖,顯示拒絕重新宣告失敗。

現在,控制台允許重新宣告:

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

Chromium 問題 #1004193

改善 WebAssembly 偵錯功能

開發人員工具已開始支援 DWARF 偵錯標準,這代表我們已進一步支援 逐步執行程式碼、設定中斷點,以及解析原文語言中的堆疊追蹤 開發人員工具。如需完整說明,請參閱「Chrome 開發人員工具中的 WebAssembly 偵錯功能」。

採用 DWARF 技術的新 WebAssembly 偵錯螢幕截圖。

網路面板更新

在「發起者」分頁中要求發起人鏈結

您現在可以將網路要求的發起人和依附元件,列為巢狀清單。這可以 可協助您瞭解提出資源要求的原因,或瞭解特定資源有哪些網路活動 (例如 視為指令碼) 所造成。

「Initiator」分頁中「要求發起人鏈結」的螢幕截圖

記錄網路面板中的網路活動之後,按一下資源並前往 「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
  • 已檢查的資源下方是dependencies。在上方的螢幕截圖中 https://web.dev/chunk-f34f99f7.jshttps://web.dev/default-627898b5.js 的依附元件。於 換句話說,https://web.dev/default-627898b5.js 造成了網路要求 https://web.dev/chunk-f34f99f7.js
,瞭解如何調查及移除這項存取權。 請參閱「查看發起者和依附元件」。

Chromium 問題 #842488

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

現在為了檢查而點選網路資源後,「Network」面板現在會加上藍色邊框 「總覽」中有關該資源的部分。這有助於偵測網路要求 發生的時間比預期早或晚

「Overview」(總覽) 窗格的螢幕截圖,醒目顯示檢查過的資源。

Chromium 問題 #988253

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

如要查看絕對路徑或完整路徑,請使用「聯播網」面板中的新「路徑」欄和「網址」欄。 每個網路資源的網址。

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

在「Waterfall」表格標題上按一下滑鼠右鍵,然後選取「Path」或「URL」以顯示新資料欄。

Chromium 問題 #993366

已更新使用者代理程式字串

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

我們更新了預先定義的使用者代理程式字串,以反映新型瀏覽器。

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

如要存取網路條件,請開啟指令選單,然後執行 Show Network Conditions 指令

Chromium 問題 #1029031

稽核面板更新

新版設定 UI

設定使用者介面採用全新的回應式設計,並具備節流設定選項 變得更簡單如要進一步瞭解調節使用者介面,請參閱稽核面板節流 並輸入變更內容

新版設定 UI。

「涵蓋範圍」分頁更新

個別函式或每個區塊的涵蓋範圍模式

「Coverage」分頁推出新的下拉式選單,可讓您指定程式碼涵蓋範圍資料 應收集每個函式每個區塊按封鎖條件更詳細, 導致收集成本也高出許多根據預設,開發人員工具目前採用依函式的涵蓋範圍。

涵蓋率模式下拉式選單。

網頁現在必須重新載入網頁,系統才會啟動涵蓋率

我們已移除在不重新載入網頁的情況下切換程式碼涵蓋範圍,因為涵蓋率資料為 並不可靠。舉例來說,如果函式的執行時間很長,就可以回報為未使用 V8 的垃圾收集器已經清理了

Chromium 問題 #1004203

下載預覽頻道

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

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

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

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

開發人員工具新功能

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