Windows 10: New and improved Event and CSS inspection for Microsoft Edge DevTools


  1. Posts : 27,154
    64-bit Windows 10 Pro build 17604
       28 Nov 2017 #1

    New and improved Event and CSS inspection for Microsoft Edge DevTools


    Editor’s note: This is the first post in a series highlighting what’s new and improved in the Microsoft Edge DevTools with EdgeHTML 16.

    EdgeHTML 16 is now rolling out to devices around the world as part of the Windows 10 Fall Creator’s Update—and with it, some great improvements to the Microsoft Edge DevTools.

    In this post, we’ll walk through a slew of new updates to the Elements tab (formerly known as the DOM Explorer) with improvements to CSS at-rules, Event Listeners, Pseudo-Elements and the overall user experience.

    CSS at-rules

    In EdgeHTML 16, we’ve completely redesigned how at-rules appear in the Elements tab. Previously, usage of CSS at-rules were either missing or incorrectly displayed. The DevTools now show @supports, @media and @keyframes styles in separate sections within the Styles pane:



    The new at-rules interface inspecting @keyframes on the CodePen example above

    We also added a new pane for inspecting the rendered font of an element. In the Fonts pane, you can now see whether a font is served from the local machine or over the network and what, if any, fallback font face was used. If over the network, the DevTools will show the correlating @font-face rule:



    You can now inspect the rendered font of an element in the Fonts pane.

    Ancestor Event Listeners

    The DevTools now allow you to inspect all event listeners on ancestor elements up to the current Window with the Ancestors option. You can also group event listeners by Element to see how the events will fire at each level of the element tree. This enables you to determine where a rogue event listener might be firing higher up the tree.



    You can now inspect all event listeners on ancestor elements up to the current Window with the Acnestors option.



    Ancestor Event Listeners can be grouped by Element or Event.

    Pseudo-Elements

    In the Styles pane, the DevTools now group styles by their respective pseudo-element, supporting ::before, ::after, ::first-letter, ::first-line and ::selection. This should make it easier to determine which style is winning the cascade.



    Styles are now grouped by their respective psuedo-element.

    User Experience

    This release also includes some tweaks to the user experience of the DevTools to make it easier for developers who work in multiple browsers.

    In particular, Layout pane has been removed and the box model is now at the top of the Computed pane, freeing up space for two new panes: Fonts and DOM breakpoints.



    The box model is now at the top of the Computed pane.

    Finally, to make it easier on developers who switch between multiple browsers, we’ve added two new ways to launch the DevTools: Ctrl+Shift+I and Ctrl+Shift+J. Ctrl+Shift+I will launch the DevTools just as the F12 keybinding does today. Ctrl+Shift+J will launch the DevTools (if not already open) and take you directly to the Console.

    You can try out and file feedback for these new features starting with EdgeHTML 16, and find us on Twitter @EdgeDevTools to let us know what you think!

    Clay Martin, Program Manager, Microsoft Edge DevTools


    Source: New and improved Event and CSS inspection for Microsoft Edge DevTools - Microsoft Edge Dev Blog

    Last edited by Brink; 28 Nov 2017 at 15:08.
      My ComputersSystem Spec


 

Related Threads
Source: Debug Microsoft Edge from Sublime or VS Code with the new Edge Diagnostics Adapter | Microsoft Edge Dev Blog
Microsoft internally considering improved Windows Store design Read more: http://mspoweruser.com/microsoft-internally-considering-improved-windows-store-design/
microsoft network realtime inspection service puts cpu to 100% in AntiVirus, Firewalls and System Security
Since today (I have installed Plex Media Server) I got my PC to peek at 100% cpu because of microsoft network realtime inspection service. In Security Essentials (W7) there was the option in Defender to uncheck "Enable Network Inspection System". ...
Since installing the November Windows 10 update (11/17/15) none of my favorites are being stored in the default Edge folder. While in Edge the favorites are available but when I go to the default folder they are not listed. Is there another...
Source: Microsoft mainstreams business intelligence with new and improved Power BI Preview - The Official Microsoft Blog
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 02:14.
Find Us