New and improved Event and CSS inspection for Microsoft Edge DevTools

News

Extraordinary Robot
Robot
Joined
Jun 27, 2006
Location
Chicago, IL
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:


57face1e4848a5b9e9a073cc4b9f29a7.png

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:


5e4856fd2de424f86387e07d9c4674f1.png

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.


f43010cc5a48b1495eaf6bcb4713167f.png

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

4c0c41e3a9f8dc7370c6f00f2f64bcc7.png

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.


5a67c297419180d9beb4bf70fe874396.png

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.


7dff5bf785549502cbe8b81b7bd00a4b.png

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

Continue reading...
 
Back
Top Bottom