DevTools（Chrome 85）的新功能

DevTools（Chrome 85）的新功能

做者：Esteban Herrera

翻譯：瘋狂的技術宅

原文：https://blog.logrocket.com/wh...

未經容許嚴禁轉載

DevTools 是開發和測試 Web 應用時最有用的工具之一。在Chrome 85 中，DevTools 作了一些改進，例如：

• Network 面板的 Timing 選項卡如今增添了 respondWith 事件，該事件記錄了 service worker fetch 事件處理運行 promise 所達成的時間(issue #1066579)
• 在 Console settings 中，Group similar 如今適用於重複的消息，而且控制檯設置中的 Selected context only 設置如今仍然有效 (issues #1082963 和 #1055875)
• 如今 Manifest 面板會在應用圖標尺寸不正確或者不是正方形時顯示應用快捷方式的警告 (issue #955497)
• 計算窗格在跨多個視口時一致顯示 (issue #1073899)

這些都是有用的更改，可是在本文中，我將回顧與樣式編輯和新的 JavaScript 功能相關的更改，以及 Source 和 Performance 面板中的改進。

在你閱讀本文時，極可能 Chrome 85 將會成爲主流的穩定版本。在撰寫本文時（2020年7月30 日），你只能經過下載 Chrome 的開發版本來得到 Chrome 85。你能夠在 Chrome 發行渠道 頁面上了解有關 Chrome 發行版本的更多信息。

CSS-in-JS 框架的樣式編輯

經過即時編輯代碼或樣式來實時查看是 DevTools 最有用的功能之一。

使用 CSS 樣式時，能夠選擇用 CSS 對象模型（CSSOM）API 以編程的方式操做 CSS 規則：

const style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('#myDiv {background-color: blue; color: yellow}');

可是，DevTools 不容許你編輯以這種方式建立的樣式。

不過這在 Chrome 85 中已經獲得改進。今後版本開始，你能夠編輯用 CSSOM API 構建的樣式，尤爲是在使用 CSSStyleSheet.insertRule、CSSStyleSheet.deleteRule、CSSStyleDeclaration.setProperty 和 CSSStyleDeclaration.removeProperty 時。

這也適用於 LitElement 之類的庫或 React Native for web。

即便在打開 DevTools 以後插入樣式，這些樣式也是可編輯的，這也適用於 Constructable Stylesheets，目前僅在 Chrome 中可用。

可構造樣式表容許你經過調用 CSSStyleSheet() 構造函數，用 replace()和 replaceSync() 添加和更新樣式表規則來建立樣式表。

const sheet = new CSSStyleSheet();
sheet.replaceSync('#myDiv {background-color: blue; color: yellow}');
document.adoptedStyleSheets = [sheet];

支持新的 JavaScript 功能

Chrome 使用 Acorn 在 DevTools 控制檯中解析 JavaScript。

在 Chrome 85 中，[Acorn 已更新至版本 7.3.0，除了其餘改進外，還增長了對可選鏈運算符的支持（ ?. ）。

經過使用可選的鏈運算符，就沒必要像下面這樣寫代碼：

if (user && user.name && user.name.last)
 lastName = user.name.last.toUpperCase();

你能夠這樣寫：

lastName = user?.name?.last?.toUpperCase();

可是直到 Chrome 84，該操做符的自動完成功能仍不被支持：

如今，控制檯中的屬性自動完成功能能夠與此操做符（user?.）一塊兒使用，就像你使用 user. 或 user[ 同樣：

其餘兩個更改與 sources 面板中的語法突出顯示有關。

在 Chrome 84 以前，私有字段和方法顯示爲白色文本。在某些狀況下，甚至該行的其他部分也顯示爲白色：

sources 面板使用 CodeMirror 顯示代碼。

在 Chrome 85 中，CodeMirror 已更新至版本 5.54.0 此版本改進了對私有屬性和類字段的解析：

最後一個關於 JavaScript 新功能的改進是關於 nullish 合併運算符。

在 Chrome 85 以前的版本中，當代碼包含如下運算符時，代碼格式會被破壞：

可是如今它被修正了，而且格式能夠正常使用：

對 Sources 面板進行更多更改

Sources 面板還有其餘有用的更改。

如今，咱們有了即便沒有選擇任何內容，也能夠在編輯器中複製或剪切當前行的功能。

只須要把光標放在要複製或剪切的行的末尾，而後按相應的鍵盤快捷鍵：

另外一個改進是，若是你使用 WebAssembly 文件，則編輯器會顯示 Wasm 模塊字節碼（十六進制）偏移量 ：

最後是斷點，條件斷點和日誌斷點的新圖標。

他們的樣子以下：

一樣，這就是他們在深色模式下的樣子：

如今它們更加豐富多彩：

我認爲，這提升了斷點圖標的可讀性，尤爲是在啓用暗模式時：

Performance 面板更新

DevTools 的 Performance 面板中有兩項重要更改。

關於第一個腳本，直到 Chrome 84，若是未緩存給定腳本，DevTools 不會顯示緩存信息：

如今，緩存信息老是顯示在摘要標籤中，顯示了未進行緩存的緣由：

第二個變化與錄製規則中顯示的時間有關。

在之前的版本中，時間是根據錄製的開始時間顯示的：

請注意，第二頁的 FCP 顯示的時間戳爲 8907 毫秒。這是從錄製開始到事件發生的時間。

如今，時間與用戶導航的位置有關：

在上面的例子中，第二頁 FCP 的時間戳爲 901.1 毫秒，即該事件在頁面加載後發生的時間。

總結

在本文中，咱們瀏覽了 Chrome 85中 DevTools 的最重要更改。可是我沒有深刻探討本文開頭所提到的四項改進，可是你能夠在這裏查看相關的內容。

最後，請記住，你能夠經過下載Chrome Canary 或Chrome 開發版來使用最新的 DevTools 功能。

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...