看看2020年Chrome Devtools中的新內容

Chrome DevTools 2020 年的新功能一覽

本文將帶您快速了解Chrome DevTools 的一些新功能。我們將簡要介紹，然後深入探討許多新的DevTools 功能，並了解其他瀏覽器中的相關進展。我持續關注這些方面，因為我創建了Dev Tips，這是您在線上能找到的最大的DevTools 提示集合！

了解DevTools 的變化至關重要，因為它不斷發展，新功能旨在幫助我們改進開發和調試體驗。

讓我們來看看最新最好的功能。雖然Chrome 的公開穩定版本擁有大部分這些功能，但我使用的是Chrome Canary，因為我喜歡走在技術前沿。

Lighthouse

Lighthouse 是一款開源工具，用於審核網頁，通常圍繞性能、SEO、可訪問性等方面。一段時間以來，Lighthouse 一直作為DevTools 的一部分捆綁在一起，這意味著您可以在名為……Lighthouse 的面板中找到它！

我非常喜歡Lighthouse，因為它是最易於使用的DevTools 部分之一。點擊“生成報告”，您會立即獲得網頁的人類可讀註釋，例如：

文檔使用易讀的字體大小，100% 易讀文本

或者：

避免過大的DOM 大小(1,189 個元素)

幾乎每個審核都鏈接到開發者文檔，解釋審核失敗的原因以及如何改進。

開始使用Lighthouse 的最佳方法是在您自己的網站上運行審核：

1. 打開DevTools，並在您訪問其中一個站點時導航到Lighthouse 面板
2. 選擇您要審核的項目（最佳實踐是一個不錯的起點）
3. 點擊生成報告
4. 點擊任何已通過/未通過的審核以調查結果

儘管Lighthouse 已經成為DevTools 的一部分有一段時間了（自2017 年以來！），但它仍然值得重點提及，因為它繼續提供面向用戶的特性，例如：

• 檢查錨元素是否解析為其URL 的審核（有趣的事實：我參與了這個工作！）
• 檢查最大內容繪製指標是否足夠快的審核
• 警告您未使用JavaScript 的審核

更好的“檢查元素”

這是一個細微的，在某些方面非常小的功能，但它可以對我們如何處理Web 可訪問性產生深遠的影響。

它的工作原理如下。當您使用“檢查元素”（可以說是DevTools 最常見的用途）時，您現在會獲得包含有關可訪問性的附加信息的工具提示。

我說這會產生深遠的影響的原因是，DevTools 已經有一段時間了具有可訪問性功能，但是我們有多少人實際使用它們？在像“檢查元素”這樣常用的功能中包含此信息將使其獲得更高的可見性並使其更易於訪問。

工具提示包括：

• 文本的對比度比率（前景文本與背景顏色的對比度如何，或有多差）
• 文本表示
• ARIA 角色
• 受檢元素是否可通過鍵盤聚焦

要試用此功能，請右鍵單擊（或Cmd Shift C）元素並選擇檢查以在DevTools 中查看它。

我製作了一個關於使用Chrome DevTools 進行可訪問性調試的14 分鐘視頻，其中更詳細地介紹了其中一些內容。

模擬視力缺陷

顧名思義，您可以使用Chrome DevTools 模擬視力障礙。例如，我們可以通過模糊視覺的視角查看網站。

您如何在DevTools 中執行此操作？像這樣：

1. 打開DevTools（右鍵單擊並選擇“檢查”或Cmd Shift C）。
2. 打開DevTools 命令菜單（Mac 上為Cmd Shift P，Windows 上為Ctrl Shift P）。
3. 在命令菜單中選擇顯示渲染。
4. 在渲染面板中選擇缺陷。

我們使用模糊視覺作為示例，但DevTools 還有其他選項，包括：全色盲、部分色盲、藍綠色盲和全色盲。

與任何此類工具一樣，它旨在補充我們（希望如此）現有的可訪問性技能。換句話說，它不是指導性的，而是對我們創建的設計和用戶體驗有影響。

以下是一些關於低視力可訪問性和模擬的額外資源：

• 低視力人士的可訪問性要求(W3C)
• 通過模擬視力缺陷來提高頁面可訪問性

獲取性能計時

DevTools 中的性能面板有時看起來像是形狀和顏色的混亂混合。

對此的更新很棒，因為它在呈現有意義的性能指標方面做得更好。

我們要查看的是“性能”面板記錄中的“計時”中顯示的額外計時矩形。這突出顯示了：

• DOMContentLoaded：初始HTML 加載時觸發的事件
• 首次繪製：瀏覽器首次將像素繪製到屏幕上時
• 首次內容繪製：瀏覽器從DOM 繪製內容的點，這向用戶表明內容正在加載
• onload：頁面及其所有資源完成加載時
• 最大內容繪製：在視口中呈現的最大圖像或文本元素

此外，如果您在性能面板記錄中找到最大內容繪製事件，則可以單擊它以獲取其他信息。

雖然這裡有很多有價值的信息，“相關節點”可能是最有用的項目，因為它指定了哪個元素導致了LCP 事件。

要試用此功能：

1. 打開DevTools 並導航到性能面板
2. 點擊“開始分析並重新加載頁面”
3. 觀察記錄的計時部分中的計時指標
4. 點擊各個指標以查看您獲得的附加信息

監控性能

如果您想快速開始使用DevTools 分析性能，並且您已經嘗試過Lighthouse，那麼我推薦使用性能監視器功能。這有點像在指尖擁有WebPageTest.org，例如CPU 使用率。

以下是訪問它的方法：

1. 打開DevTools
2. 打開命令菜單（Mac 上為Cmd Shift P，Windows 上為Ctrl Shift P）
3. 從命令菜單中選擇“顯示性能監視器”
4. 與網站互動並瀏覽
5. 觀察結果

性能監視器可以為您提供有趣的指標，但是，與Lighthouse 不同，它需要您自己弄清楚如何解釋它們並採取行動。沒有提供建議。您需要自己研究CPU 使用率圖表，並詢問90% 對於您的網站是否可以接受（可能不行）。

性能監視器具有交互式圖例，您可以在其中打開和關閉指標，例如：

• CPU 使用率
• JS 堆大小
• DOM 節點
• JS 事件偵聽器
• 文件
• 文檔框架
• 佈局/秒
• 樣式重新計算/秒

CSS 概述和本地覆蓋

CSS-Tricks 已經介紹了這些功能，所以去看看吧！

• CSS 概述：一個方便的DevTools 面板，提供有關頁面使用的CSS 的大量有趣統計信息
• 本地覆蓋：一個強大的功能，允許您使用本地資源覆蓋生產網站，以便您可以輕鬆預覽更改

那麼，其他瀏覽器的DevTool 呢？

我確定您已經註意到我在整篇文章中都在使用Chrome。這是我個人使用的瀏覽器。也就是說，值得考慮的是：

• Firefox DevTools 目前看起來非常棒
• 隨著Microsoft Edge 從Chromium 擴展而來，它也將受益於這些DevTools 功能
• 正如Safari 技術預覽版發行說明（在該頁面上搜索Web 檢查器）所證明的那樣，Safari DevTools 已經取得了長足的進步

換句話說，請關注，因為這是一個快速發展的領域！

結論

我們在很短的時間內涵蓋了很多內容！

• Lighthouse：一個提供性能、可訪問性、SEO 和最佳實踐提示和建議的面板。
• 檢查元素：對“檢查元素”功能的增強，它為“檢查元素”工具提示提供可訪問性信息
• 模擬視力缺陷：渲染面板中的一個功能，用於通過低視力的視角查看頁面。
• 性能面板計時：性能面板記錄中的其他指標，顯示面向用戶的統計信息，例如最大內容繪製
• 性能監視器– 當前網站性能指標的實時可視化，例如CPU 使用率和DOM 大小

如果您想了解最新的更新並獲得超過200 個Web 開發技巧，請查看我的郵件列表Dev Tips！我在ModernDevTools.com 上還有一個高級視頻課程。而且，我傾向於在Twitter 上發布大量的額外Web 開發資源。

以上是看看2020年Chrome Devtools中的新內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！