微軟剛剛宣布了針對 Web 開發的一些改進，其中最吸引我們的，莫過於 Microsoft Edge 的 3D 視圖工具。對於開發者來，這有助於他們更輕鬆高效地發現、解決並改進網站上的諸多元素。在解決常見 Web 開發挑戰時 —— 比如 DOM 複雜性、不需要滾動條、或 z-index 堆疊等問題 —— 3D 可視化工具都會派上極大的用場。
（來自：Edge Blog）
雖然 3D 視圖等 DevTools 並不適合普通網絡用戶，但微軟還是在努力給 Web 開發者帶來新功能和相關體驗改進。
Debug the web in 3D – Microsoft Edge（via）
最新加入的功能包括快速查看頁面複雜度、調試 z-index 堆疊問題、以及調試複合層的性能問題。
如果你想要在深度嵌套的容器中展開快速查找，3D 視圖工具顯然可以提供最佳體驗。
其 DOM 選項卡中能夠快速展示三維樹，並幫助 Web 開發者發現頁面的哪部分可能存在過多的嵌套。
DOM 選項卡還可為開發者提供網頁的整體 3D 視圖，允許縮放平移，直到超出視口的元素也變得可見。只需點擊其中一個元素，便可直接跳轉。
此外 z-index 選項卡能夠讓調查更加簡潔直觀，該工具允許查看哪些元素正在堆疊上下文、以及元素如何沿着 z-index 軸堆疊，有助於快速定位常見問題。
接着是調試複合層的性能問題，這項新功能支持以適當或優化的層數來分解網頁、進而提升 Web 性能體驗 —— 尤其當某些組件獨立於其它組件，來處理動畫或變更時。
最後，微軟添加了一個新的複合層選項卡，以便開發者在左側欄查看已創建的圖層列表。當鼠標懸停在每個圖層上時，就會在 3D 視圖中高亮顯示重要信息，比如渲染圖層所需的內存大小。