DevTools(Chrome 85)的新功能

// 每日前端夜話 第371篇
// 正文共：2700 字
// 預計閱讀時間：10 分鐘
DevTools 是開發和測試 Web 應用時最有用的工具之一。在Chrome 85 中，DevTools 做了一些改進，例如：
Network 面板的 Timing 選項卡現在增添了 respondWith 事件，該事件記錄了 service worker fetch 事件處理運行 promise 所達成的時間(issue #1066579[1])在 Console settings 中，Group similar 現在適用於重複的消息，並且控制臺設置中的 Selected context only 設置現在仍然有效 (issues #1082963[2] 和 #1055875[3])現在 Manifest 面板會在應用圖標尺寸不正確或者不是正方形時顯示應用快捷方式的警告 (issue #955497[4])計算窗格在跨多個視口時一致顯示 (issue #1073899[5])
這些都是有用的更改，但是在本文中，我將回顧與樣式編輯和新的 JavaScript 功能相關的更改，以及 Source 和 Performance 面板中的改進。
在你閱讀本文時，很可能 Chrome 85 將會成為主流的穩定版本。在撰寫本文時（2020年7月30 日），你只能通過下載 Chrome 的開發版本[6]來獲得 Chrome 85。你可以在 Chrome 發行渠道[7] 頁面上了解有關 Chrome 發行版本的更多信息。
CSS-in-JS 框架的樣式編輯
通過即時編輯代碼或樣式來實時查看是 DevTools 最有用的功能之一。
使用 CSS 樣式時，可以選擇用 CSS 對象模型[8]（CSSOM）API 以編程的方式操作 CSS 規則：
const style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('#myDiv {background-color: blue; color: yellow}');
但是，DevTools 不允許你編輯以這種方式創建的樣式。
不過這在 Chrome 85 中已經得到改進[9]。從此版本開始，你可以編輯用 CSSOM API 構建的樣式，尤其是在使用 CSSStyleSheet.insertRule、CSSStyleSheet.deleteRule、CSSStyleDeclaration.setProperty 和  CSSStyleDeclaration.removeProperty 時。
這也適用於 LitElement 之類的庫或 React Native for web。
即使在打開 DevTools 之後插入樣式，這些樣式也是可編輯的，這也適用於 Constructable Stylesheets[10]，目前僅在 Chrome 中可用[11]。
可構造樣式表允許你通過調用 CSSStyleSheet() 構造函數，用 replace()和 `replaceSync()`[12] 添加和更新樣式表規則來創建樣式表。
const sheet = new CSSStyleSheet();
sheet.replaceSync('#myDiv {background-color: blue; color: yellow}');
document.adoptedStyleSheets = [sheet];
支持新的 JavaScript 功能
Chrome 使用 Acorn[13] 在 DevTools 控制臺中解析 JavaScript。
在 Chrome 85 中，[Acorn 已更新至版本 7.3.0[14]，除了其他改進外，還增加了對可選鏈運算符的支持（ ?. ）。
通過使用可選的鏈運算符[15]，就不必像下面這樣寫代碼：
if (user && user.name && user.name.last)
 lastName = user.name.last.toUpperCase();
你可以這樣寫：
lastName = user?.name?.last?.toUpperCase();
但是直到 Chrome 84，該操作符的自動完成功能仍不被支持：
chrome 84中的可選鏈
現在，控制臺中的屬性自動完成功能可以與此操作符（user?.）一起使用，就像你使用 user. 或 user[ 一樣：
chrome 85 中的可選鏈
其他兩個更改與 sources 面板中的語法突出顯示有關。
在 Chrome 84 之前，私有欄位和方法[16]顯示為白色文本。在某些情況下，甚至該行的其餘部分也顯示為白色：
chrome 85之前的私有欄位
sources 面板使用 CodeMirror[17] 顯示代碼。
在 Chrome 85 中，CodeMirror 已更新至版本 5.54.0[18] 此版本改進了對私有屬性和類欄位的解析[19]：
chrome 85之後的私有欄位
最後一個關於 JavaScript 新功能的改進是關於 nullish 合併運算符[20]。
在 Chrome 85 之前的版本中，當代碼包含以下運算符時，代碼格式會被破壞：
Chrome 85之前的 nullish 合併
但是現在它被修正了[21]，並且格式可以正常使用：
chrome 85之後 nullish 的合併對 Sources  面板進行更多更改
**Sources ** 面板還有其他有用的更改。
現在，我們有了即使沒有選擇任何內容，也可以在編輯器中複製或剪切當前行的功能[22]。
只需要把光標放在要複製或剪切的行的末尾，然後按相應的鍵盤快捷鍵：
將光標放在要複製或剪切的行的末尾，然後按相應的鍵盤快捷鍵
另一個改進是，如果你使用 WebAssembly 文件，則編輯器會顯示 Wasm 模塊字節碼（十六進位）偏移量[23] ：
編輯器現在顯示字節碼（十六進位）偏移量
最後是斷點，條件斷點和日誌斷點的新圖標[24]。
他們的樣子如下：
chrome 85之前的斷點
同樣，這就是他們在深色模式下的樣子：
深色模式下的斷點
現在它們更加豐富多彩：
chrome 85中的多色斷點
我認為，這提高了斷點圖標的可讀性，尤其是在啟用暗模式時：
深色模式下的Chrome 85斷點Performance 面板更新
DevTools 的 Performance 面板中有兩項重要更改。
關於第一個腳本，直到 Chrome 84，如果未緩存給定腳本，DevTools 不會顯示緩存信息：
編譯之前
現在，緩存信息總是顯示在摘要標籤中[25]，顯示了未進行緩存的原因：
編譯之後
第二個變化與錄製規則中顯示的時間有關。
在以前的版本中，時間是根據錄製的開始時間顯示的：
記錄規則中顯示的時間
請注意，第二頁的 FCP 顯示的時間戳為 8907 毫秒。這是從錄製開始到事件發生的時間。
現在，時間與用戶導航的位置有關[26]：
chrome 85中的時間戳
在上面的例子中，第二頁 FCP 的時間戳為 901.1 毫秒，即該事件在頁面加載後發生的時間。
總結
在本文中，我們瀏覽了 Chrome 85中 DevTools 的最重要更改。但是我沒有深入探討本文開頭所提到的四項改進，但是你可以在這裡查看相關的內容[27]。
最後，請記住，你可以通過下載Chrome Canary[28] 或Chrome 開發版[29]來使用最新的 DevTools 功能。
作者：Esteban Herrera
翻譯：瘋狂的技術宅
原文：https://blog.logrocket.com/whats-new-in-devtools-chrome-85/

精彩文章回顧,點擊直達

Reference[1]
#1066579: https://crbug.com/1066579
[2]
#1082963: https://crbug.com/1082963
[3]
#1055875: https://crbug.com/1055875
[4]
#955497: https://crbug.com/955497
[5]
#1073899: https://crbug.com/1073899
[6]
Chrome 的開發版本: https://www.google.com/chrome/dev/
[7]
Chrome 發行渠道: http://www.chromium.org/getting-involved/dev-channel
[8]
CSS 對象模型: https://drafts.csswg.org/cssom/
[9]
不過這在 Chrome 85 中已經得到改進: https://bugs.chromium.org/p/chromium/issues/detail?id=946975
[10]
Constructable Stylesheets: https://developers.google.com/web/updates/2019/02/constructable-stylesheets
[11]
僅在 Chrome 中可用: https://chromestatus.com/feature/5394843094220800
[12]
replaceSync(): https://wicg.github.io/construct-stylesheets/#dom-cssstylesheet-replacesync
[13]
Acorn: https://github.com/acornjs/acorn
[14]
[Acorn 已更新至版本 7.3.0: https://bugs.chromium.org/p/chromium/issues/detail?id=1083214
[15]
可選的鏈運算符: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
[16]
私有欄位和方法: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/Private_class_fields
[17]
CodeMirror: https://codemirror.net/
[18]
CodeMirror 已更新至版本 5.54.0: https://bugs.chromium.org/p/chromium/issues/detail?id=1073903
[19]
改進了對私有屬性和類欄位的解析: https://js.libhunt.com/codemirror-changelog/5.54.0
[20]
nullish 合併運算符: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
[21]
它被修正了: https://bugs.chromium.org/p/chromium/issues/detail?id=1083797
[22]
即使沒有選擇任何內容，也可以在編輯器中複製或剪切當前行的功能: https://bugs.chromium.org/p/chromium/issues/detail?id=800028
[23]
顯示 Wasm 模塊字節碼（十六進位）偏移量: https://bugs.chromium.org/p/chromium/issues/detail?id=1071432
[24]
斷點，條件斷點和日誌斷點的新圖標: https://bugs.chromium.org/p/chromium/issues/detail?id=1041830
[25]
總是顯示在摘要標籤中: https://bugs.chromium.org/p/chromium/issues/detail?id=912581
[26]
時間與用戶導航的位置有關: https://bugs.chromium.org/p/chromium/issues/detail?id=974550
[27]
查看相關的內容: https://developers.google.com/web/updates/2020/06/devtools
[28]
Chrome Canary: https://www.google.com/chrome/canary/
[29]
Chrome 開發版: https://www.google.com/chrome/dev/