Chrome 84 開發者工具新特性

時間 2020-05-29

原文原文鏈接

本文參考自：What's New In DevTools (Chrome 84)
developers.google.com/web/updates…（需越牆）

編注：新特性都是先在 Chrome 的 Canary、Beta 通道中發佈的，要想第一時間體驗新特性，請下載 Canary 或 Beta 通道版本的 Chrome。本文中的全部連接都是須要越牆的，請自備經過方式。

新特性一：新增 Issues 標籤
當咱們打開開發者工具後，咱們常常會碰到 Console 中有許多許多警告和錯誤消息的狀況。這些警告和錯誤消息跟咱們正常打印出來的日誌混在一塊兒，顯得很是雜亂。爲了解決這個問題，Chrome 84 新增了一個 Issues 標籤，把這些警告和錯誤消息集中到了一塊兒，並以一種結構化、分類化的形式進行組織，同時給出了產生這些問題的詳細緣由、解決這些問題的指導，以及全部受影響的資源或請求。

新特性二：Inspect 氣泡中新增了 Accessibility 信息
以下圖

新特性三：Performance 面板相關的更新

1. 底部狀態欄新增 TBT 指標值展現
- TBT（Total Blocking Time，總阻塞時長）是谷歌正在試驗的各項新的性能指標中主要的一項，他能夠爲更精確計算 FID （First Input Delay，首次交互延遲）指標提供支持。從名稱上能夠看出，他能夠將來測量頁面從開始加載到用戶可用（便可以對用戶的交互作出響應）須要多長的時間。
  注意：頁面開始有展現或者已經完成展現，並不表明頁面已經能夠開始交互了，由於可能會有一些JS還未執行完成，正在阻塞主線程。
- 想要獲取 TBT 指標，不能使用 Reload Page 來測量，須要點擊 Record 按鈕，而後手動重載頁面，等待頁面頁面完成再點擊中止錄製才能得到 TBT 指標。
2. Experience （用戶體驗）時間線上新增佈局變更事件
- 性能面板新增了 Experience 時間線，並將標記出 Layout Shift （佈局變更）事件，CLS （Cumulative Layout Shift）指標也是谷歌的一項新實驗的性能指標，它能夠幫助咱們鑑別出那些意外的佈局變更，以此確保界面的穩定性。
- 在 Experience 時間上，點擊一個 Layout Shift 事件（以下圖中的紅色小方塊），在下面的 Summary 面板中會展現關於這個事件的詳情，如 Moved From（偏移的開始座標）、Moved to（偏移的結果座標）
- 意外的佈局變更會很是影響用戶體驗，好比：圖片加載慢，而當圖片又沒有指定寬高屬性時，圖片在加載完成時就會影響已經加載出來的內容，致使頁面產生大幅度佈局變更。關於 CLS 指標的詳細介紹，能夠查看這篇文章 web.dev/cls/

新特性四：調整了 Promise 對象在 Console 中打印出來的狀態描述，使其保持與 Promise 規範一致

在 Chrome 84 以前，當咱們把一個 resolved 的 Promise 在 Console 中打印出來時，其狀態會被描述爲「resolved」，以下圖：
但其實根據 Promise 規範中的描述，其應該描述爲「fullfilled」，爲了貼近規範，Chrome 84 已經對此作了調整，以下圖：

新特性五：Styles 面板相關的更新

1. 開始支持 revert 關鍵字

revert 關鍵字跟 unset 關鍵字有點相似，但不徹底同樣，關於他們的區別能夠閱讀這篇文檔 developer.mozilla.org/en-US/docs/…。另外，CSS 中還有其餘一些關鍵字，如 inherit、initial。
2. 鼠標 hover 支持預覽 background-image 屬性中的圖片
3. 顏色選擇器將採用空格分隔的參數指定寫法
- 根據 CSS Color Module Level 4 規範文檔，顏色類的函數如 rgb()，應該支持空格分隔的參數寫法，例如：rgb(0, 0, 0) 能夠寫成 rgb(0 0 0)。
- 在 Chrome 84 中，顏色選擇器將採用這種新的寫法，對於舊的寫法，你能夠經過按住 Shift 鍵在任意顏色值前的圖標上屢次點擊來切換不一樣的顏色值函數，這些函數都將採用這種新的傳參寫法展現。
- 注意：後續新出的 CSS 特性如 color() 函數將再也不支持舊的參數寫法（逗號分隔的參數列表）