Edge Web開發工具迎來3D視圖體驗改進


微軟剛剛宣佈瞭針對Web開發的一些改進,其中最吸引我們的,莫過於MicrosoftEdge的3D視圖工具。對於開發者來,這有助於他們更輕松高效地發現、解決並改進網站上的諸多元素。在解決常見Web開發挑戰時——比如DOM復雜性、不需要滾動條、或z-index堆疊等問題——3D可視化工具都會派上極大的用場。

1.webp

(來自:Edge Blog)

雖然 3D 視圖等 DevTools 並不適合普通網絡用戶,但微軟還是在努力給 Web 開發者帶來新功能和相關體驗改進。

Debug the web in 3D - Microsoft Edge(via)

最新加入的功能包括快速查看頁面復雜度、調試 z-index 堆疊問題、以及調試復合層的性能問題。

2.webp

如果你想要在深度嵌套的容器中展開快速查找,3D 視圖工具顯然可以提供最佳體驗。

3.jpg

其 DOM 選項卡中能夠快速展示三維樹,並幫助 Web 開發者發現頁面的哪部分可能存在過多的嵌套。

4.jpg

DOM 選項卡還可為開發者提供網頁的整體 3D 視圖,允許縮放平移,直到超出視口的元素也變得可見。隻需點擊其中一個元素,便可直接跳轉。

5.jpg

此外 z-index 選項卡能夠讓調查更加簡潔直觀,該工具允許查看哪些元素正在堆疊上下文、以及元素如何沿著 z-index 軸堆疊,有助於快速定位常見問題。

6.jpg

接著是調試復合層的性能問題,這項新功能支持以適當或優化的層數來分解網頁、進而提升 Web 性能體驗 —— 尤其當某些組件獨立於其它組件,來處理動畫或變更時。

7.jpg

最後,微軟添加瞭一個新的復合層選項卡,以便開發者在左側欄查看已創建的圖層列表。當鼠標懸停在每個圖層上時,就會在 3D 視圖中高亮顯示重要信息,比如渲染圖層所需的內存大小。


相關推薦

2022-08-22

種情況或正在發生改變。一方面,盡管 ViveTool 等第三方工具已能夠實現這項功能,但微軟遲遲沒有向公眾提供這方面的體驗渠道。另一方面,有報道稱 Windows 11 22H2 更新將於 9 月最後一周到來、並於 10 - 11 月更廣泛地推出。據說

2024-03-30

Windows Widgets Board 中的 Feed 和 Windows Search 中的 Web 搜索。開發人員現在可以使用這些點將他們的內容推送到小工具板。微軟應將此功能擴展到所有 Windows 用戶。在此之前隻有一個 Feed Provider 選擇。

2022-07-09

占地方的臃腫軟件。即便如此,軟件巨頭還是在努力為它開發一系列新功能。近日有消息稱,Windows11的默認瀏覽器,將迎來類似MicrosoftPhotos照片應用程序的一些改進。(via Windows Latest)作為 Windows 11 附帶的新照片應用程序,Micros

2022-09-07

預期的是,DNF 將僅獲得來自上遊的有限支持。而 2020 年開發的 DNF5,已在 Fedora-Devel 列表中嶄露頭角。據悉,DNF5 放棄 Python 代碼,以生成更小的系統、更快的性能,並取代現有的 DNF 和 microdnf 工具。DNF5 還統一軟件管理堆棧的行

2022-08-29

(來自:Samsung Community)三星還證實,固件團隊正在積極開發一項名叫 Astro Hyperlapse 的酷炫功能,以便用戶能夠拍攝更具藝術感的夜空照片。其次,隨著 QR 碼在電子門禁、票證、網址、名片、菜單板等各個領域都得到廣泛的應用

2022-06-28

作為一款特殊的控件,EdgeWebView2旨在方便開發者將Web內容嵌入應用程序。在Windows10/11的不同程序中,用戶可獲益於EdgeChromium瀏覽器的最新技術改進。現在,微軟又宣佈將WebView2運行時引入瞭受支持的Windows10消費者版本。(來自:M

2022-09-29

目標,該公司正在引入諸多新功能,包括深入研究主題的工具和其它變更。這些改變,旨在為搜索賦予一種更直觀的使用體驗,以新穎的方式凸顯地圖、圖像、甚至視頻片段。本次更新是在 Google 今年早些時候披露的內部研究之

2022-08-22

上周,AboutChromebooks的KevinC.Tofel,在ChromeOS側面板上看到一個新的“消息流”(Feed)選項。作為GoogleReader的多年老用戶,他一度懷疑這款RSS閱讀器即將回歸,但一時缺乏足夠的證據。好消息是,在多方打聽之後,我們現已非常確

2022-09-29

金山、巴黎和東京。Google 還通過 Google Maps 平臺向第三方開發商推廣環保路線技術。這傢科技巨頭將在今年晚些時候向開發人員提供此功能的預覽版。

2023-02-14

1預覽版,可以在沒有微軟賬戶的情況下使用WindowsWidgets小工具。這是一個非常需要的變化,它使Widgets更加可用,特別是在第三方產品現在慢慢出現在微軟商店的情況下。經過幾個月的測試,無微軟賬戶的Widget來到穩定通道,為

2022-06-29

本編輯器終於迎來瞭這兩年的首個重大更新。其中最吸引開發者的,就是Vim9.0大版本附帶瞭對註重性能表現的Vim9腳本語言的支持,預期可帶來一到兩個數量級(10~100倍)的執行速度提升。(來自:GitHub 主頁)Vim 9.0 大版本也帶

2022-09-25

中還將迎來一系列新穎的原創內容。白皮書在積極的早期開發階段,Neal Stephenson 的 THEEE METAVERSE 承諾一個富有想象力的交互式虛擬世界、以及一個讓人難忘的起源故事。在這個建立於 Lamina1 鏈上的開放虛擬世界中,創者們將可體

2022-09-15

議,將以約200億美元的現金和股票收購Figma,後者是一傢開發“在線設計協作工具”的初創企業。Adobe在一份聲明中稱:“Adobe的使命是通過數字體驗改變世界。Figma的使命是幫助團隊進行可視化協作,並讓所有人都可以接入設計

2022-06-22

能力。● Web 檢查器擴展。構建自定義工具或轉換現有的開發人員工具擴展以在 Web Inspector 中使用。● FleXbox Inspector使用 Web Inspector 中新的可視化疊加層,幫助您更快速、更輕松地瞭解 Flexbox 元素的佈局。它標記瞭彈性項目之間