DevTools 的新功能：跨瀏覽器版本

瀏覽器開發工具不斷發展，不斷添加新的和改進的功能。 很難跟踪，尤其是在使用多個瀏覽器時。 有了這麼多，我們感到不知所措並使用我們已經知道的功能而不是跟上新功能也就不足為奇了。

不過很遺憾，因為其中一些可以讓我們更有效率。

因此，我撰寫本文的目標是提高對 Chrome、Microsoft Edge、Firefox 和 Safari 中一些最新功能的認識。 希望它會讓您想嘗試一下，也許會在您下次需要調試特定於瀏覽器的問題時幫助您更舒服。

話雖如此，讓我們直接進入。

Chrome 開發者工具

Chrome DevTools 團隊一直在努力使他們（現已 13 歲）的代碼庫現代化。 他們一直在忙於改進構建系統，遷移到 TypeScript，引入新的 WebComponents，重新構建他們的主題基礎設施等等。 因此，這些工具現在更易於擴展和更改。

但除了這些較少面向用戶的工作之外，該團隊還提供了許多功能。 讓我在這裡回顧一下其中的一些，與 CSS 調試有關。

滾動捕捉

CSS 滾動捕捉為 Web 開發人員提供了一種控制可滾動容器停止滾動的位置的方法。 這是一個有用的功能，例如，您希望瀏覽器自動為您將每張照片整齊地放置在其可滾動容器中的長照片列表。

如果您想了解有關滾動捕捉的更多信息，可以閱讀此 MDN 文檔，並在此處查看 Adam Argyle 的演示。

滾動捕捉的關鍵屬性是：

• scroll-snap-type ，它告訴瀏覽器捕捉發生的方向，以及它是如何發生的；
• scroll-snap-align ，它告訴瀏覽器在哪裡捕捉。

Chrome DevTools 引入了有助於調試這些關鍵屬性的新功能：

• 如果一個元素使用scroll-snap-type定義了滾動捕捉，則元素面板會在它旁邊顯示一個徽章。

• 您可以單擊滾動捕捉徽章以啟用新的覆蓋。 當您這樣做時，頁面上會突出顯示幾件事：
  • 滾動容器，
  • 在容器內滾動的項目，
  • 項目對齊的位置（用藍點標記）。

此疊加層使您可以輕鬆了解滾動後是否以及如何卡入到位。 例如，當您的項目沒有背景並且它們之間的邊界很難看到時，這可能非常有用。

雖然滾動捕捉不是新的 CSS 功能，但採用率相當低（根據 chromestatus.com，不到 4%），而且由於規範發生了變化，並不是每個瀏覽器都以相同的方式支持它。

我希望這個 DevTools 功能能讓人們想要更多地使用它，並最終在他們的網站上採用它。

容器查詢

如果您近年來從事過任何類型的 Web 開發，您可能聽說過容器查詢。 長期以來，它一直是最受歡迎的 CSS 功能之一，也是瀏覽器製造商和規範編寫者需要解決的一個非常複雜的問題。

如果您不知道什麼是容器查詢，我建議您先閱讀 Stephanie Eckles 的 CSS 容器查詢入門文章。

簡而言之，它們是開發人員根據容器大小定義元素佈局和样式的一種方式。 在創建可重用組件時，這種能力是一個巨大的優勢，因為我們可以讓它們適應它們使用的地方（而不是只適應媒體查詢適合的視口大小）。

幸運的是，這個領域的事情正在發生變化，Chromium 現在支持容器查詢，Chrome DevTools 團隊已經開始添加工具，使其更容易開始使用它們。

Chromium 中默認情況下尚未啟用容器查詢（要啟用它們，請轉到 chrome://flags 並蒐索“容器查詢”），它們可能還需要一段時間才能啟用。 此外，調試它們的 DevTools 工作仍處於早期階段。 但是一些早期的功能已經落地。

• 當在 DevTools 中選擇具有來自@container規則的樣式的元素時，該規則將出現在元素面板的樣式側邊欄中。 這類似於媒體查詢樣式在 DevTools 中的呈現方式，並且可以直接了解特定樣式的來源。

如上面的屏幕截圖所示，樣式側邊欄顯示了適用於當前元素的 2 條規則。 底部始終適用於.media元素並提供其默認樣式。 而最上面的嵌套在一個@container (max-width:300px)容器查詢中，只有當容器小於300px 時才會生效。

• 最重要的是，就在@container at-rule 上方，Styles 窗格顯示一個指向該規則解析的元素的鏈接，將鼠標懸停在它上面會顯示有關其大小的額外信息。 這樣您就可以確切地知道容器查詢匹配的原因。

Chrome DevTools 團隊正在積極開發此功能，您可以期待更多的未來。

鉻合作

在介紹其他瀏覽器具有的功能之前，讓我們先談談 Chromium。 Chromium 是 Chrome、Edge、Brave 和其他瀏覽器構建的開源項目。 這意味著所有這些瀏覽器都可以訪問 Chromium 的功能。

該項目最活躍的兩個貢獻者是 Google 和 Microsoft，當談到 DevTools 時，他們合作開發了一些有趣的功能，我現在想介紹一下。

CSS 佈局調試工具

幾年前，Firefox 在這個領域進行了創新，推出了第一個網格和 flexbox 檢查器。 基於 Chromium 的瀏覽器現在也使 Web 開發人員可以輕鬆地調試網格和 flexbox。

這個協作項目涉及來自微軟和谷歌的工程師、產品經理和設計師，他們朝著一個共同的目標努力（在我的 BlinkOn 演講中了解有關項目本身的更多信息）。

除其他外，DevTools 現在具有以下佈局調試功能：

• 突出顯示頁面上的多個網格和彈性佈局，並自定義是否要查看網格線名稱或編號、網格區域等。

• Flex 和網格編輯器可以直觀地使用各種屬性。

• CSS 自動完成中的對齊圖標使選擇屬性和值更容易。

• 突出顯示屬性懸停以了解屬性適用於頁面的哪些部分。

您可以在 Microsoft 和 Google 的文檔站點上閱讀有關此內容的更多信息。

本土化

這是另一個涉及 Microsoft 和 Google 的合作項目，現在，所有基於 Chromium 的 DevTools 都可以翻譯成英語以外的其他語言。

最初，從未有過本地化 DevTools 的計劃，這意味著這是一項巨大的努力。 它涉及遍歷整個代碼庫並使 UI 字符串可本地化。

結果還是值得的。 如果英語不是您的第一語言，並且您更願意在其他語言中使用 DevTools，請轉到設置 ( F1 ) 並找到語言下拉菜單。

下面是它在 Chrome DevTools 中的截圖：

這是Edge在日語中的外觀：

邊緣開發工具

微軟在兩年多前轉向 Chromium 開發 Edge。 雖然當時它在網絡社區引起了很多討論，但從那時起就沒有太多關於它的文章或言論。 不過，在 Edge（包括其 DevTools）上工作的人一直很忙，現在瀏覽器有很多獨特的功能。

基於 Chromium 開源項目確實意味著 Edge 受益於其所有功能和錯誤修復。 實際上，Edge 團隊將 Chromium 存儲庫中所做的更改提取到他們自己的存儲庫中。

但在過去一年左右的時間裡，團隊開始根據 Edge 用戶的需求和反饋創建 Edge 特定的功能。 Edge DevTools 現在有一系列我將介紹的獨特功能。

打開、關閉和移動工具

DevTools 擁有近 30 個不同的面板，在任何瀏覽器中都是一款非常複雜的軟件。 但是，您永遠不需要同時訪問所有工具。 事實上，第一次啟動 DevTools 時，只有幾個面板可見，以後可以添加更多。

但另一方面，很難發現默認情況下不顯示的面板，即使它們對您非常有用。

Edge 添加了 3 個小而強大的功能來解決這個問題：

• 選項卡上的關閉按鈕可關閉您不再需要的工具，
• 標籤欄末尾的+ （加號）按鈕可打開任何工具，
• 用於移動工具的上下文菜單選項。

下面的 GIF 顯示瞭如何在 Edge 中完成主區域和抽屜區域中的關閉和打開工具。

您還可以在主區域和抽屜區域之間移動工具：

• 右鍵單擊頂部的選項卡會顯示“移至底部”項目，並且
• 右鍵單擊抽屜中的選項卡會顯示“移至頂部”項目。

使用 DevTools 工具提示獲取上下文幫助

初學者和經驗豐富的開發人員都很難完全了解 DevTools。 正如我之前提到的，有這麼多的面板，你不太可能知道它們。

為了解決這個問題，Edge 添加了一種直接從工具轉到 Microsoft 網站上的文檔的方法。

這個新的工具提示功能用作覆蓋工具的可切換疊加層。 啟用後，面板會突出顯示，並為每個面板提供上下文幫助，並提供文檔鏈接。

您可以通過 3 種不同的方式啟動工具提示：

• 在 Windows/Linux 上使用Ctrl + Shift + H鍵盤快捷鍵（在 Mac 上使用Cmd + Shift + H ）；
• 進入主 ( ... ) 菜單，然後進入幫助，並選擇“切換 DevTools 工具提示”；
• 通過使用命令菜單並鍵入“工具提示”。

自定義顏色

在代碼編輯環境中，開發人員喜歡自定義他們的顏色主題，以使代碼更易於閱讀和觀看。 因為 Web 開發人員也在 DevTools 上花費了大量時間，所以它也有可定制的顏色是有意義的。

Edge 剛剛在已經可用的深色和淺色主題之上向 DevTools 添加了許多新主題。 一共增加了9個新主題。 這些來自 VS Code，因此使用此編輯器的人會很熟悉。

您可以通過進入設置（使用F1或右上角的齒輪圖標）或使用命令菜單並鍵入theme來選擇要使用的主題。

Firefox 開發工具

與 Chrome DevTools 團隊類似，Firefox DevTools 的開發人員一直在忙於大規模的架構更新，旨在現代化他們的代碼庫。 此外，由於 Mozilla 最近不得不重新關注，他們的團隊現在變得相當小了。 但是，即使這意味著他們有更少的時間來添加新功能，他們仍然設法發布了一些非常有趣的功能，我現在將介紹這些功能。

調試不需要的滾動條

你有沒有問過自己：“這個滾動條是從哪裡來的？” 我知道我有，現在 Firefox 有一個工具來調試這個問題。

在 Inspector 面板中，所有滾動的元素旁邊都有一個scroll標記，這在處理深度嵌套的 DOM 樹時已經很有用了。 最重要的是，您可以單擊此標記以顯示導致滾動條出現的元素（或多個元素）。

您可以在此處找到有關它的更多文檔。

可視化跳位順序

使用鍵盤瀏覽網頁需要使用tab鍵逐個移動可聚焦元素。 使用tab時可聚焦元素的聚焦順序是網站可訪問性的一個重要方面，不正確的順序可能會使用戶感到困惑。 注意這一點尤其重要，因為現代佈局 CSS 技術允許 Web 開發人員非常輕鬆地重新排列頁面上的元素。

Firefox 有一個有用的 Accessibility Inspector 面板，它提供有關可訪問性樹的信息，自動發現和報告各種可訪問性問題，並讓您模擬不同的色覺缺陷。

在這些功能之上，面板現在提供了一個新的頁面覆蓋，顯示可聚焦元素的跳格順序。

要啟用它，請使用工具欄中的“顯示跳位順序”複選框。

您可以在此處找到有關它的更多文檔。

全新的性能工具

沒有多少 Web 開發領域像性能優化那樣依賴工具。 在這個領域，Chrome DevTools 的性能面板是同類中最好的。

在過去的幾年裡，Firefox 工程師一直專注於提高瀏覽器本身的性能，為了幫助他們做到這一點，他們構建了一個性能分析器工具。 該工具最初是為優化引擎原生代碼而構建的，但也支持從一開始就分析 JavaScript 性能。

今天，這個新的性能工具在預發布版本（Nightly 和 Developer Edition）中取代了舊的 Firefox DevTools 性能面板。 當你有機會時，不妨試一試。

除此之外，新的 Firefox 分析器支持與他人共享配置文件，因此他們可以幫助您提高記錄的用例的性能。

您可以在此處閱讀有關它的文檔，並在他們的 GitHub 存儲庫中了解有關該項目的更多信息。

Safari 網絡檢查器

最後但同樣重要的是，讓我們回顧一下最近的一些 Safari 功能。

Apple 的小團隊一直忙於圍繞工具進行廣泛的改進和修復。 了解有關 Safari Web Inspector 的更多信息可以幫助您在 iOS 或 tvOS 設備上調試網站時提高工作效率。 此外，它還有很多其他 DevTools 沒有的功能，而且很多人都不知道。

CSS 網格調試

由於 Firefox、Chrome 和 Edge（以及所有基於 Chromium 的瀏覽器）擁有用於可視化和調試 CSS 網格的專用工具，Safari 是最後一個沒有此功能的主流瀏覽器。 好吧，現在可以了！

從根本上說，Safari 現在在這方面與其他瀏覽器的 DevTools 具有相同的功能。 這很棒，因為這意味著從一個瀏覽器切換到另一個瀏覽器很容易，並且仍然保持高效。

• 網格標記顯示在元素面板中以快速查找網格。
• 單擊徽章可切換頁面上的可視化覆蓋。
• 一個新的佈局面板現在顯示在側邊欄中。 它允許您配置網格覆蓋，查看頁面上所有網格的列表並為它們切換覆蓋。

Safari 實現的有趣之處在於，他們確實掌握了該工具的性能方面。 您可以一次啟用許多不同的覆蓋，並在頁面上滾動而不會導致任何性能問題。

另一個有趣的事情是 Safari 引入了一個 3 窗格元素面板，就像 Firefox 一樣，它允許您同時查看 DOM、所選元素的 CSS 規則和佈局面板。

在此 WebKit 博客文章中了解有關 CSS Grid Inspector 的更多信息。

一系列調試器改進

Safari 曾經有一個單獨的資源和調試器面板。 他們將它們合併到一個單獨的 Sources 面板中，這樣在調試代碼時可以更輕鬆地找到所需的一切。 此外，這使得該工具與很多人習慣的 Chromium 更加一致。

在跨瀏覽器的世界中，常見任務的一致性很重要。 Web 開發人員已經需要跨多個瀏覽器進行測試，所以如果他們在使用另一個瀏覽器的 DevTools 時需要學習一個全新的範例，這會使事情變得比他們需要的更困難。

但 Safari 最近還專注於為其調試器添加其他 DevTools 所沒有的創新功能。

引導腳本：
Safari 允許您編寫保證在頁面上的任何腳本之前首先運行的 JavaScript 代碼。 例如，這對於檢測用於添加debugger語句或日誌記錄的內置函數非常有用。

新斷點配置：
所有瀏覽器都支持多種類型的斷點，例如條件斷點、DOM 斷點、事件斷點等。

Safari 最近改進了他們的整個斷點類型套件，為它們提供了一種廣泛配置它們的方法。 使用這個新的斷點功能，您可以決定：

• 如果您希望僅在某個條件為真時才觸發斷點，
• 如果您希望斷點完全暫停執行，或者只是執行一些代碼，
• 甚至播放音頻嗶聲，以便您知道某行代碼已執行。

queryInstances和queryHolders控制台函數：
當您的站點開始使用大量 JavaScript 對象時，這兩個函數非常有用。 在某些情況下，可能很難跟踪這些對象之間的依賴關係，並且內存洩漏也可能開始出現。

Safari 確實有一個內存工具，可以通過讓您探索內存堆快照來幫助解決這些問題。 但是有時您已經知道是哪個類或對象導致了問題，並且您想查找存在哪些實例或引用它的對象。

如果Animal是應用程序中的 JavaScript 類，則queryInstances(Animal)將返回其所有實例的數組。

如果foo是應用程序中的一個對象，那麼queryHolders(foo)將返回一個包含對foo的引用的所有其他對象的數組。

結束的想法

我希望這些功能對您有用。 我只能推薦使用多個瀏覽器並熟悉他們的 DevTools。 當您必須在您不經常使用的瀏覽器中調試問題時，更熟悉其他 DevTools 會很有用。

要知道，製造瀏覽器的公司都有團隊積極致力於 DevTools。 他們致力於使它們變得更好、更少故障和更強大。 這些團隊依靠您的反饋來構建正確的東西。 如果不了解您面臨的問題或缺少哪些功能，他們就很難就構建什麼做出正確的決定。

向 DevTools 團隊報告錯誤不僅會在修復出現時幫助您，還可能會幫助許多面臨相同問題的其他人。

值得知道的是，Microsoft、Mozilla、Apple 和 Google 的 DevTools 團隊通常規模很小，並且會收到很多反饋，因此報告問題並不意味著它會很快得到解決，但它確實有幫助，而且這些團隊正在傾聽。

您可以通過以下幾種方式報告錯誤、提出問題或請求功能：

• Firefox 開發工具
  • Firefox 使用 Bugzilla 作為他們的公共錯誤跟踪器，歡迎任何人通過在此處創建新條目來報告錯誤或請求新功能。 您只需要一個 GitHub 帳戶即可登錄。
  • 可以使用@FirefoxDevTools 帳戶在 Twitter 上與團隊取得聯繫，也可以登錄 Mozilla 聊天（在此處查找有關聊天的文檔）。
• Safari 網絡檢查器
  • Safari 還為他們的 WebKit 錯誤使用公共錯誤跟踪。 這是有關如何搜索錯誤和報告新錯誤的文檔。
  • 您還可以使用 @webkit 在 Twitter 上與團隊聯繫。
  • 最後，您還可以使用反饋助手報告有關 Safari 和 Safari Web Inspector 的錯誤。
• 邊緣開發工具
  • 報告問題或請求功能的最簡單方法是使用 DevTools 中的反饋按鈕（工具右上角的小棒圖）。
  • 通過提及@EdgeDevTools 帳戶，通過 Twitter 向團隊提問最有效。
• Chrome 開發者工具
  • 該團隊在 devtools-dev 郵件列表以及 Twitter 上的 @ChromeDevTools 上聽取反饋。
• 鉻
  • 由於 Chromium 是支持 Google Chrome 和 Microsoft Edge（以及其他）的開源項目，您還可以在 Chromium 的錯誤跟踪器上報告問題。

至此，感謝您的閱讀！