Microsoft Edge DevTools 改進了 3D 視圖工具以可視化 Web 開發問題

Microsoft 已宣布對作為開發工具一部分的 3D 查看器工具進行一些重大改進。該工具正在獲得相當多的性能改進，應該可以幫助 Web 開發人員識別、修復和改進共同構成網站的多個元素。

事實證明，3D 視圖工具非常有助於可視化和解決常見的 Web 開發問題，例如 DOM 複雜性、不需要的滾動條或 z-index 覆蓋問題。3D View Tool 和 DevTools 顯然不適合普通網絡用戶。然而，微軟保證，那些已經使用開發工具的人應該會從新功能中受益。

3D 視圖工具一直是查找深度嵌套容器的最快方法之一。3D 視圖工具的 DOM 選項卡可以快速顯示 3 維 DOM 樹，並幫助開發人員確定頁面的哪個部分可能包含過多的包裝器。

該工具的 DOM 選項卡還為開發人員提供了整個網頁的概覽，並允許他們縮小和平移場景，直到視口之外的元素變得可見。單擊其中一個元素允許開發人員直接跳轉到元素工具。

調試 z-index 堆疊問題：

3D 視圖工具有一個 Z-index 選項卡，使探索更容易、更直觀。該工具可讓您查看哪些元素正在堆疊上下文以及元素如何沿 z-index 堆疊。這可以幫助您快速找到常見問題。

調試組層的性能問題：

此新功能將網頁拆分為正確或優化的層數。這極大地提高了性能，尤其是當某些組件獨立於其他組件進行動畫或更改時。

Microsoft 添加了一個新的“複合層”選項卡來檢測創建的層。左側的側邊欄顯示圖層列表，將鼠標懸停在每個圖層上會在 3D 場景中突出顯示它。該面板將突出顯示有關圖層的重要信息，例如渲染它們所需的大小和內存。