Microsoft announces next iteration 3D View in Microsoft Edge DevTools  

    Microsoft announces next iteration 3D View in Microsoft Edge DevTools

    Microsoft announces next iteration 3D View in Microsoft Edge DevTools


    Posted: 23 Jan 2020
    We are thrilled to announce the next iteration of 3D View in the Microsoft Edge DevTools, with a new feature to help debug z-index stacking context. The general 3D View shows a representation of the DOM (Document Object Model) depth using color and stacking, and the z-Index view helps you isolate the different stacking contexts of your page.

    3D view is enabled by default in the Canary branch – to enable it in other branches, open the DevTools “Experiments” settings (Ctrl-Shift-P -> “Experiments“) and turn on “Enable 3D View.” If you don’t see that item, navigate to edge://flags and make sure you have enabled “Developer Tools experiments.” Once 3D view is enabled, you can find it under the “More tools” menu (or via search: Ctrl-Shift-P -> “3D View“).



    With our first 3D View experiment, we were able to get incredible feedback from Twitter and from the feedback button. This encouraged us to conduct further usability studies to improve the tool. Along the way, we received plenty of requests for CSS z-index debugging as a feature, and felt that the 3D View would be a great vehicle to try it out.

    In the z-index tab you can further simplify the view by only showing elements with a stacking context or hiding elements with the same paint order as their parent. These two settings will make for a flatter and more readable experience. Check out our explainer for more details!



    What’s next

    Coming soon, we’ll have a better highlighting experience between the Elements panel and 3D View, UI improvements, and new camera controls. We’d love to hear what else you’d like to see from this experience! What other features would help you with your day to day debugging? Feel free to reach out to us on Twitter, or just click “Send feedback” in the Microsoft Edge “Help and Feedback” menu at any time.


    Erica Draud, Program Manager, Edge DevTools


    Source: Debug z-index stacking content with 3D View in the Microsoft Edge DevTools - Microsoft Edge Blog


    Brink's Avatar Posted By: Brink
    23 Jan 2020


 

  Related Discussions
Our Sites
Site Links
About Us
Windows 10 Forums is an independent web site and has not been authorized, sponsored, or otherwise approved by Microsoft Corporation. "Windows 10" and related materials are trademarks of Microsoft Corp.

© Designer Media Ltd
All times are GMT -5. The time now is 07:48.
Find Us




Windows 10 Forums