What's New In DevTools (Microsoft Edge 85)
Announcements from the Microsoft Edge DevTools team
The following sections are a list of announcements you may have missed from the Microsoft Edge DevTools team. See the announcements to try new features in the DevTools, VS Code extensions, and more. To stay up to date on all the latest and greatest features in your developer tools, download the Microsoft Edge preview channels and follow the Microsoft Edge DevTools team on Twitter.
CSS grid debugging features
The Microsoft Edge DevTools team is collaborating with the Chrome DevTools team and Chromium community to add new CSS grid debugging features to DevTools. You are now able to display grid line numbers, grid gaps, and extended grid lines as an on-page overlay. Plus, more improvements to the grid tools are coming soon.
To enable the experiment, see Turn on experimental features and select the checkbox next to Enable new CSS Grid debugging features.
To try out the experiment with a sample, see CSS Grid planner example.
Chromium issue #1047356
Edit and Replay requests with the Network Console
You are now able to use Edit and Replay on requests in the Network Log using the Network Console.
A new panel, the Network Console opens in the DevTools Drawer and automatically populates with information for the HTTP request. To see the response returned from the server, edit the request (if needed) and select Send.
You may also use the Network Console to create and send HTTP requests directly from the DevTools.
To enable the experiment, see Turn on experimental features and select the checkbox next to Enable Network Console.
Open the Network Log, open the contextual menu (right-click), and select Edit and Replay.
Chromium issue #1093687
Service worker respondWith events in the Timing tab
The Timing tab of the Network panel now includes
respondWith service worker events. The
respondWith service worker event shows the duration from the time immediately before the service worker
fetch event handler starts running to the time when the
respondWith promise of the
fetch handler is settled.
Expand Response received to see additional information from the
fetch response like
Chromium issue #1066579
webhint feedback in the Issues panel
webhint is an open-source tool that provides real-time feedback on the accessibility, cross-browser compatibility, security, performance, PWAs, and other common web development issues of websites. You are now able to see webhint feedback in the Issues panel.
To enable the experiment, see Turn on experimental features and select the checkbox next to Enable webhint.
Open the Issues panel to see feedback from webhint.
Chromium issue #1070378
Move tools between panels
Normally, tools such as Elements and Network may only be opened in the main (top) panel of DevTools. Similarly, tools such as 3D View and Issues may only be opened in the drawer (bottom) panel of DevTools. You are now able to customize your DevTools layout by moving tools between the top and bottom panels.
To enable the experiment, see Turn on experimental features and select the checkbox next to Enable support to move tabs between panels.
Chromium issue #897944
Improved Initiator tooltip in the Network panel
In Microsoft Edge 83 and 84, tooltips for the Initiator column, which shows the cause of the resource request, in the Network Log displayed with a horizontal scrollbar. You were only able to see the call stack that initiated the request by scrolling horizontally in the tooltip.
Starting with Microsoft Edge 85, you are now able to see the Initiator call stack in the tooltip without scrolling horizontally.
Chromium issue #1069404
Announcements from the Chromium project
The following sections announce additional features available in Microsoft Edge 85 that were contributed to the open source Chromium project.
Style editing for CSS-in-JS frameworks
The Styles pane now has better support for editing styles that were created with the CSS Object Model (CSSOM) APIs. Many CSS-in-JS frameworks and libraries use the CSSOM APIs under the hood to construct styles.
For example, the
h1 styles added with
CSSStyleSheet (CSSOM APIs) were not editable previously. The styles are editable now in the Styles pane.
Give this feature a try with a sample that uses CSS-in-JS.
Chromium issue #946975
Lighthouse 6 in the Lighthouse panel
The Lighthouse panel is now running Lighthouse 6. For a full list of all changes, see v6.0.0 release notes.
Lighthouse 6.0 introduces three new metrics to the report: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Total Blocking Time (TBT).
The performance score formula has also been reweighted to better reflect the loading experience of the user.
Chromium issue #772558
First Meaningful Paint deprecation
First Meaningful Paint (FMP) is deprecated in Lighthouse 6.0. FMP has also been removed from the Performance panel. Largest Contentful Paint is the recommended replacement for FMP.
Chromium issue #1096008
Optional chaining syntax autocompletion
Property auto-completion in the Console now supports optional chaining syntax, for example,
name?. now works in addition to
Syntax highlighting for private fields
private class fields are now properly syntax-highlighted and pretty-printed in the Sources panel.
Syntax highlighting for Nullish coalescing operator
DevTools now properly pretty-prints the nullish coalescing operator in the Sources panel.
New app shortcut warnings in the Manifest pane
App shortcuts help users quickly start common or recommended tasks within a web app.
The Manifest pane now shows warnings for the following conditions.
- The app shortcut icons are smaller than 96x96 pixels
- The app shortcut icons and manifest icons are not square (since the icons are ignored)
Chromium issue #955497
Consistent display of the Computed pane
The Computed pane in the Elements panel now displays consistently as a pane across all viewport sizes. Previously the Computed pane merged inside the Styles pane when the width of the DevTools viewport was narrow.
Chromium issue #1073899
Bytecode offsets for WebAssembly files
DevTools now uses bytecode offsets for displaying line numbers of Wasm disassembly.
The line numbers make it clearer that you are looking at binary data, and is more consistent with how the Wasm runtime references locations.
Chromium issue #1071432
Line-wise copy and cut in Sources Panel
When performing copy or cut with no selection in the Sources panel editor, DevTools copies or cuts the current line of content.
Chromium issue #800028
Console Settings updates
Ungroup same console messages
The Group similar toggle in Console Settings now applies to duplicate messages. Previously it just applied to similar messages.
For example, previously, DevTools did not ungroup the
hello messages even though Group similar is unchecked. Now, the
hello messages are ungrouped.
Give this feature a try with a sample that sends duplicate messages to the Console.
Chromium issue #1082963
Persisting Selected context only settings
The Selected context only settings in Console Settings is now persisted. Previously the settings were reset every time you closed and reopened DevTools. The change makes the setting behavior consistent with other Console Settings options.
Chromium issue #1055875
Performance panel updates
Chromium issue #912581
Navigation timing alignment in the Performance panel
The Performance panel used to show times in the rulers based on when the recording started. The timing has now changed for recordings where the user navigates, where DevTools now shows ruler times relative to the navigation instead.
The times for
DOMContentLoaded, First Paint, First Contentful Paint, and Largest Contentful Paint events are updated to be relative to the start of the navigation, which means the timing matches the timings reported by
Chromium issue #974550
New icons for breakpoints, conditional breakpoints, and logpoints
The Sources panel has new designs for breakpoints, conditional breakpoints, and logpoints. Breakpoints are represented by a red circle, just like VS Code and Visual Studio. Icons are added to differentiate conditional breakpoints and logpoints.
Chromium issue #1041830
Download the Microsoft Edge preview channels
If you are on Windows or macOS, consider using the Microsoft Edge preview channels as your default development browser. The preview channels give you access to the latest DevTools features.
Getting in touch with Microsoft Edge DevTools team
Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.
- Send your feedback using the Feedback icon in the DevTools
- Tweet at @EdgeDevTools
- Submit a suggestion to The Web We Want
- File bugs on this page in the edge-developer repository
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Jecelyn Yeen (Developer advocate, Chrome DevTools).
This work is licensed under a Creative Commons Attribution 4.0 International License.