在使用開發者工具的時候，無意間發現了一個3D面板，如下：
仔細想想，這應該是之前 Firefox 的特性啊，不過后來去掉了，說是太難維護，沒想到 Edge 也添加了這個特性。
使用該特性，你可以完成如下任務：
-
以3D視圖瀏覽你的網頁
-
基於 z-index 堆疊上下文的調試
-
從具有合成層的三維視圖訪問層工具功能
-
清除DOM窗格或z-index窗格中的一些雜亂內容
-
為調試 DOM 問題或者 z-index 問題進行着色，以便調試
如果你想看看 3D 視圖項目的早期版本，並自己運行代碼，可以參考3D View Sample。
在開發者工具的左側，可以看到兩個標簽頁：
-
Z-索引標簽頁，在應用程序中瀏覽不同的元素，並在不同的元素間進行導航。本標簽頁為默認標簽頁
-
DOM 標簽頁，用於瀏覽整個網頁的 DOM 結構，易於訪問每一個元素。要查看本頁，點擊 DOM 標簽頁切換。
快捷鍵
-
旋轉 DOM：要進行水平旋轉，請按左右箭頭鍵，如果要進行垂直旋轉，請按上下箭頭鍵。
-
DOM 元素導航，要選擇不同的元素，請選擇一個元素，並按上下箭頭鍵。
鼠標操作
-
旋轉 DOM：使用鼠標左鍵拖動即可。
-
平移圖像：鼠標右鍵移動。
-
圖形縮放：移動右下方的滑塊或者使用鼠標上的滾輪進行縮放
接下來看些效果：
下次調試的時候可以試試，布局不再愁...
最近准備發奮了，要多寫些東西分享了，歡迎關注下面公眾號，更多文章期待與你相遇：