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

Brink · Nov 27, 2017

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
Click to expand...

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

Tweet

— Twitter API (@user) date

:)

IECUSTOMIZER · Nov 27, 2017

Will IE 11 implement css variables?

Hi,

Development/improvement of IE ceased with the ratification of the HTML5 Living Standard. Only critical security updates and a few minor UI changes have been pushed in Windows updates for the past two years.

These are consumer support forums.

A good place to ask developer questions (there is probably a workaround or polyfill available) is the Internet Explorer and Edge forums at
Stack Overflow - Where Developers Learn, Share, & Build Careers (MSFT Edge team hang out there). For css 3.1 questions try searching
CSS-Tricks or developer.mdn.com. Another resource for compatibility questions is caniuse.com.

Regards.

JeanneStephey · Nov 27, 2017

New and improved updates for Defender?

Yes is was very helpful to know that others (many others) have found Defender to be a complete failure as I did. I just wish I had researched it thoroughly before malware crashed my system and the $200 cost left me with a blank slate and I can start from
scratch again. Windows 10 has been a curse from the beginning. Best advice - purchase a dependable protection program. MS is still under development.

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

New and improved Event and CSS inspection for Microsoft Edge DevTools

New and improved Event and CSS inspection for Microsoft Edge DevTools

New and improved Event and CSS inspection for Microsoft Edge DevTools - Similar Threads - improved Event CSS

CSS not applied to Android 11/Edge

Microsoft Edge Devtools

New Inking experience improvements in Microsoft Edge

Introducing Source Order Viewer in the Microsoft Edge DevTools

Microsoft improving DevTools accessibility in Microsoft Edge

List of DevTools in new Microsoft Edge (Chromium)

Introducing the Microsoft Edge DevTools Protocol

Microsoft edge inspect element not working

Introducing the Microsoft Edge DevTools Preview app