多圖預警，種草 DevTools 新特性( Chrome 80 )

前端瓶子君發表於2020-02-12

原文網址 : https://juejin.im/post/5e42a6c4e51d4526e651b26e

devChrome

一、在控制檯中支援 let 和 class 重新宣告

控制檯現在支援 let 和 class 語句的重新宣告，當我們在使用控制檯除錯 JavaScript 程式碼程式碼段時，對於已通過 let 或 class 宣告的，無法再次宣告是一個普遍的煩惱。

在控制檯外部或單個控制檯輸入的指令碼中，重新宣告 let 或 class 語句仍然會導致 SyntaxError 。

例如，當 x 已被 let 宣告，當再次使用 let 宣告這個區域性變數時，控制檯將丟擲一個錯誤：

現在，控制檯允許重新宣告：

二、改進WebAssembly除錯

DevTools 已經開始支援 DWARF 除錯標準，這意味著在 DevTools 中增加了對程式碼步進、設定斷點和解析源語言中的堆疊跟蹤的支援。在 Chrome DevTools 中檢視改進的 WebAssembly 除錯的完整事件。

三、Network 更新

1. 在啟動程式選項卡中請求啟動程式鏈

現在，你可以將網路請求的啟動器和依賴項作為巢狀列表檢視，這可以幫助你理解為什麼要請求某個資源，或者某個資源(例如指令碼)導致了什麼網路活動。

在網路皮膚中記錄網路活動之後，單擊資源，然後轉到Initiator選項卡檢視其請求引發程式鏈：

檢查的資源是粗體。在上面的截圖中，web.dev/default-627… 是被檢查的資源；
被檢查資源之上的資源是發起者。在上面的截圖中，web.dev/bootstrap.j… 是 web.dev/default-627… 的發起人，換句話說，是 web.dev/bootstrap.j… 引起了 web.dev/default-627… 的網路請求；
被檢查資源下面的資源是依賴關係。在上面的截圖中，web.dev/chunk-f34f9… 是 web.dev/default-627… 的屬地換句話說，是 web.dev/default-627… 引起了 web.dev/chunk-f34f9… 的網路請求；

還可以通過按住Shift並將滑鼠懸停在網路資源上來訪問啟動程式和依賴項資訊。

2. 在 Overview 中突出顯示選中的網路請求

在單擊網路資源以便對其進行檢查之後，Network 皮膚現在在 Overview 中在該資源周圍放置了一個藍色框。這可以幫助你檢測網路請求是否比預期的發生得早或更晚。

3. Network 皮膚中顯示 Url 列和 Path 列

使用 Network 皮膚中新的 Path 列和 Url 列檢視每個網路資源的絕對路徑或完整URL。

4. 更新了 User-Agent 字串

DevTools支援通過Network Conditions 選項卡設定自定義 User-Agent 字串，User-Agent 字串會影響連線到網路資源的 User-Agent HTTP 標頭以及 navigator.userAgent 的值。

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

你還可以在 Device 模式下設定 User-Agent 字串。

四、Audits 更新

新的配置介面

配置 UI 採用了新的響應式設計，並且節流配置選項也得到了簡化。檢視 Audits Panel Throttling 瞭解更多變更資訊。

五、覆蓋標籤更新

1. 按功能或按塊覆蓋模式

Coverage 選項卡有一個新的下拉選單，允許你指定應該為每個函式還是每個塊收集程式碼覆蓋率資料。每個塊的覆蓋範圍更詳細，但收集起來也更昂貴。DevTools現在預設使用每個函式覆蓋。

在HTML檔案中，你可能會看到較大的程式碼覆蓋率差異，具體取決於你是按功能使用還是按塊模式使用。使用按功能模式時，HTML檔案中的內聯指令碼被視為功能。如果指令碼完全執行，則DevTools會將整個指令碼標記為已使用的程式碼。只有指令碼完全不執行時，DevTools才會將該指令碼標記為未使用的程式碼。