Edge 瀏覽器開發工具新增了 3D 視圖，你嘗試了嗎？

在使用開發者工具的時候，無心間發現了一個3D面板，以下：

 

 

仔細想一想，這應該是以前 Firefox 的特性啊，不事後來去掉了，說是太難維護，沒想到 Edge 也添加了這個特性。

使用該特性，你能夠完成以下任務：

 

• 以3D視圖瀏覽你的網頁

• 基於 z-index 堆疊上下文的調試

• 從具備合成層的三維視圖訪問層工具功能

• 清除DOM窗格或z-index窗格中的一些雜亂內容 

• 爲調試 DOM 問題或者 z-index 問題進行着色，以便調試

 

若是你想看看 3D 視圖項目的早期版本，並本身運行代碼，能夠參考3D View Sample。

在開發者工具的左側，能夠看到兩個標籤頁：

 

• Z-索引標籤頁，在應用程序中瀏覽不一樣的元素，並在不一樣的元素間進行導航。本標籤頁爲默認標籤頁

• DOM 標籤頁，用於瀏覽整個網頁的 DOM 結構，易於訪問每個元素。要查看本頁，點擊 DOM 標籤頁切換。

 

快捷鍵

 

• 旋轉 DOM：要進行水平旋轉，請按左右箭頭鍵，若是要進行垂直旋轉，請按上下箭頭鍵。

• DOM 元素導航，要選擇不一樣的元素，請選擇一個元素，並按上下箭頭鍵。

 

鼠標操做

 

• 旋轉 DOM：使用鼠標左鍵拖動便可。

• 平移圖像：鼠標右鍵移動。

• 圖形縮放：移動右下方的滑塊或者使用鼠標上的滾輪進行縮放

 

接下來看些效果：

 

 

 

 

 

 

下次調試的時候能夠試試，佈局再也不愁...

最近準備發奮了，要多寫些東西分享了，歡迎關注下面公衆號，更多文章期待與你相遇：