Microsoft Edge DevTools@EdgeDevTools

Official news and updates from the #MicrosoftEdge Developer Tools team.

 Redmond, WA
docs.microsoft.com/en-us/mic…
Joined December 2013
Microsoft Edge 96 ships with the latest Edge DevTools features and fixes, including a space-saving vertical toolbar option and the return of the ability to quickly toggle Console without moving tabs. Learn more at docs.microsoft.com/microsoft…
What's new in DevTools: Microsoft Edge 96. Preview Focus Mode, a simplified UI option featuring a compact, vertical toolbar. Open Console from main panel or drawer without moving tabs. Try new features and fixes in the Microsoft Edge DevTools VS Code extension. Get notified if sourcemaps cannot be loaded in Sources. Open dropdown menus more easily. And more!

ALT What's new in DevTools: Microsoft Edge 96. Preview Focus Mode, a simplified UI option featuring a compact, vertical toolbar. Open Console from main panel or drawer without moving tabs. Try new features and fixes in the Microsoft Edge DevTools VS Code extension. Get notified if sourcemaps cannot be loaded in Sources. Open dropdown menus more easily. And more!

2
11
15
Thanks to your feedback, we're fixing a reported issue with Edge DevTools drawer tabs. This fix restores the ability to switch between full and split-screen Console with a single click. This change is now available in Edge 96 and rolling out to everyone over the next few weeks!
9
12
New color themes to match VS @code, a new memory debugging tool, and the ability to copy CSS as JS? Cool! Take a look at what else is new in the latest release of Microsoft Edge DevTools. docs.microsoft.com/microsoft…
What's new in DevTools, Microsoft Edge 93. Apply color themes from VS Code to DevTools. Debug DOM node memory leaks with new Detached Elements tool. Launch DevTools extension from VS Code Javascript debugger. Change DevTools display language independently from browser. Copy CSS as Javascript in Styles pane. And more!

ALT What's new in DevTools, Microsoft Edge 93. Apply color themes from VS Code to DevTools. Debug DOM node memory leaks with new Detached Elements tool. Launch DevTools extension from VS Code Javascript debugger. Change DevTools display language independently from browser. Copy CSS as Javascript in Styles pane. And more!

3
11
33
Replying to @_mer2
Our original tweet is a bit outdated; 3D View is now available by default in Edge DevTools! (No experiment required.) You can add the 3D View tool from the "More Tools" menu. /レイチェル Docs: docs.microsoft.com/microsoft…
Screenshot of 3D View

ALT Screenshot of 3D View
4
2
Replying to @EdgeDevTools @patrickbrosset
The #BlinkOn session "CSS Flexbox and Grid tooling in Chromium" is now available to watch on demand! piped.video/watch?v=D5x1Fa-A…

CSS Flexbox and Grid tooling in Chromium (BlinkOn 14)

Learn how devtools and blink engineers across Microsoft and Google ...

youtube.com
3
11
🛠 DevTools for VS @Code 1.1.6 is out! 💪🏽 Support for ARM 🎛 Easier access to settings 🐛Removed debugger dependency 🆕 Updated to Edge Version 88 📚 New docs Readme: github.com/microsoft/vscode-… Get it :aka.ms/devtools-for-code
3
32
136
Flexbox and font tooling? Yes, please! 👍 The Edge DevTools 89 release has some great experimental features for front-end developers as well as UI improvements, bug fixes, and more. Read the full story at docs.microsoft.com/microsoft…
What's new in DevTools: Microsoft Edge 89. View updates to DevTools with the improved Welcome tab. Edit typography visually with the Font Editor. Add outlines to flex containers. Learn about flex alignment properties with illustrative icons in Styles pane. Add tools quickly with the More Tools (+) button. And more!

ALT What's new in DevTools: Microsoft Edge 89. View updates to DevTools with the improved Welcome tab. Edit typography visually with the Font Editor. Add outlines to flex containers. Learn about flex alignment properties with illustrative icons in Styles pane. Add tools quickly with the More Tools (+) button. And more!
8
23
Replying to @fumafuma_mi
Please see the "..." menu, also shown in this screenshot. I hope this helps! /レイチェル
Screenshot showing the "..." menu in DevTools with "More tools" selected

ALT Screenshot showing the "..." menu in DevTools with "More tools" selected

1
3
2
With the 1.1.4 release of the Microsoft Edge Devtools for Visual Studio Code extension we have added a much requested feature: Console messages now show up in @code. aka.ms/devtools-for-code
Console messages from you JavaScript code show up on the output tab of the VS Code console when you select the "DevTools Console" as the output type.

ALT Console messages from you JavaScript code show up on the output tab of the VS Code console when you select the "DevTools Console" as the output type.

1
16
42
Ever wonder what all the different panels and tabs in DevTools do? After turning on the "Focus Mode and DevTools Tooltips" and "Enable + button" experiments, use the ❓ icon at the bottom left to toggle informative overlays in Edge DevTools.
The latest in DevTools: Microsoft Edge Canary. DevTools Tooltips provide information about how to use each part of Edge DevTools. To turn on this feature, open the Settings pane in DevTools and choose Experiments. Then, select Focus Mode and DevTools Tooltips and Enable + button tab menus to open more tools.

ALT The latest in DevTools: Microsoft Edge Canary. DevTools Tooltips provide information about how to use each part of Edge DevTools. To turn on this feature, open the Settings pane in DevTools and choose Experiments. Then, select Focus Mode and DevTools Tooltips and Enable + button tab menus to open more tools.

1
1
8
Focus Mode is a new mode that lets you group different tabs together based on your own debugging workflow in Edge DevTools. We start you with some recommended tabs for groups like "Layout" and "Testing," but you can customize tab groups to your own liking!
The latest in DevTools: Microsoft Edge Canary. Focus Mode allows you to group your favorite tabs for different debugging tasks. To turn on this feature, open the Settings pane in DevTools and choose Experiments. Then, select Focus Mode and DevTools Tooltips and Enable + button tab menus to open more tools.

ALT The latest in DevTools: Microsoft Edge Canary. Focus Mode allows you to group your favorite tabs for different debugging tasks. To turn on this feature, open the Settings pane in DevTools and choose Experiments. Then, select Focus Mode and DevTools Tooltips and Enable + button tab menus to open more tools.

1
3
7
Two new DevTools experimental features have just landed in Edge Canary (90.0.810.0 and later): Focus Mode UI and DevTools Tooltips. Read on for more information about what they do and how to try them out!
1
22
61
💡 console.log(`New blog post!`); Read "Six time-saving tips for using the DevTools Console" from @partytimeHXLNT and @patrickbrosset to learn how to get the most from the console when debugging for the web: msft.it/6019pC7oc
12
23
Canary, Dev, and Beta users: Have you noticed our new look? 👀 The redesigned Welcome tab (formerly What's New) in Edge DevTools lists the latest features, fixes, and documentation links. Learn more at docs.microsoft.com/microsoft…
Screenshot of Welcome tab in Edge DevTools

ALT Screenshot of Welcome tab in Edge DevTools
3
10
Calling all developers working with PWAs and service workers! Check out our service worker debugging improvements in the Network, Application, and Sources panes: aka.ms/service-worker-tools
1
15
39
Edge Canary users: Use DevTools to test how your website will look on the Surface Duo and Samsung Galaxy Fold. Learn more at docs.microsoft.com/microsoft….
The latest in DevTools: Microsoft Edge Canary. Test how your website will appear on the Surface Duo and Samsung Galaxy Fold. Turn on Experimental Web Platform features in edge://flags to access the new CSS media screen-spanning feature and getWindowSegments JavaScript API.

ALT The latest in DevTools: Microsoft Edge Canary. Test how your website will appear on the Surface Duo and Samsung Galaxy Fold. Turn on Experimental Web Platform features in edge://flags to access the new CSS media screen-spanning feature and getWindowSegments JavaScript API.

3
4
6
Edge Canary users: Give our new visual Font Editor in DevTools a try! Learn more at aka.ms/devtools-font-editor.
The latest in DevTools: Microsoft Edge Canary. Dynamically adjust font size, line height, and more with the visual Font Editor. To turn on this feature, open the Settings pane in DevTools and choose Experiments. Then, select Enable new Font Editor tool within the Styles pane.

ALT The latest in DevTools: Microsoft Edge Canary. Dynamically adjust font size, line height, and more with the visual Font Editor. To turn on this feature, open the Settings pane in DevTools and choose Experiments. Then, select Enable new Font Editor tool within the Styles pane.
3
5
🚨 New experiment: from Microsoft Edge 89 onwards, we offer a "+" button to quickly add more tools . Together with the already existing "move to top|bottom" feature this allows for much more customisation of your developer tools setup. go.microsoft.com/fwlink/?lin…

ALT Video of using the plus button to add new tools to the existing tools group
8
12
Stuck on CSS? Puzzled by your PWA? From A to Z-index, Edge DevTools has you covered. Check out the web debugging features landing for Microsoft Edge 88. Docs available at docs.microsoft.com/microsoft…
What's new in DevTools Microsoft Edge 88: Use Microsoft Edge Driver on Linux. Access recommendations to fix accessibility and compatibility bugs using the Issues tool. Visualize Composited Layers in 3D View. Jump to CSS variable definitions in the Styles pane. Debug service workers with request routing timelines. ...and more!

ALT What's new in DevTools Microsoft Edge 88: Use Microsoft Edge Driver on Linux. Access recommendations to fix accessibility and compatibility bugs using the Issues tool. Visualize Composited Layers in 3D View. Jump to CSS variable definitions in the Styles pane. Debug service workers with request routing timelines. ...and more!
7
22
🍿 Last week at #VSCodeDay Chris Heilmann of the @EdgeDevTools team gave a talk about the Edge DevTools extension for @code. Here’s a pre-recorded version, in case you missed it. piped.video/watch?v=eu0if9Lh…
1
7
41
🚨 Update: The Microsoft Edge DevTools extension for @code version 1.1.2: 🆕 DevTools Version 85 📦 Microsoft Edge Debugger as a dependency 💅🏼 Theme settings! 🗑 Close instance buttons! 💻 Code and changelog: github.com/microsoft/vscode-… 🍾 Get it now: aka.ms/devtools-for-code
Theme chooser in the Microsoft Edge Devtools extension for VS Code.

ALT Theme chooser in the Microsoft Edge Devtools extension for VS Code.

6
23
Replying to @EdgeDevTools @addyosmani @ChromeDevTools
Or, for those who prefer animations, here's how to turn on the font editor experiment:

ALT Animated GIF walkthrough how to turn on the font editor experiment of the styles pane.

1
3
Replying to @addyosmani @ChromeDevTools
Thanks, Addy, we're happy it is out! Currently it is available in the Canary build and you need to turn on the experiment and reload DevTools to see it. Once turned on, any CSS block that contains font information gets the icon to open the editor. /Chris
Enable font Editor in the Styles Pane

ALT Enable font Editor in the Styles Pane

Reload Devtools

ALT Reload Devtools

Font icons appear next to each CSS block that features font settings.

ALT Font icons appear next to each CSS block that features font settings.

1
1
8
Enjoying the latest updates to DevTools in Edge 87? Our team has added some new features and fixes to keep you productive in Edge and Visual Studio @code. Read more at docs.microsoft.com/microsoft…
What's new in DevTools: Microsoft Edge 87. Use DevTools in one of eleven languages, now with improved translation quality. Move tools between top and bottom panels. Customize multiple CSS Grid overlays. Create your own keyboard shortcuts. Bring DevTools with you with the Microsoft Edge Tools for Visual Code extension. And more.

ALT What's new in DevTools: Microsoft Edge 87. Use DevTools in one of eleven languages, now with improved translation quality. Move tools between top and bottom panels. Customize multiple CSS Grid overlays. Create your own keyboard shortcuts. Bring DevTools with you with the Microsoft Edge Tools for Visual Code extension. And more.
7
20
In Microsoft Edge 87, you can create custom keyboard shortcuts for any DevTools action.
2
19
97
🆕📕New to docs: Overrides store and edit resources of a live web site on your hard drive. The page will load the local resource until you remove it. This allows for persistent changes using Developer Tools. docs.microsoft.com/en-us/mic…
Screenshot of the Microsoft Edge Developer tools open on docs.microsoft.com with the main stylesheet saved to an overrides folder.

ALT Screenshot of the Microsoft Edge Developer tools open on docs.microsoft.com with the main stylesheet saved to an overrides folder.
2
17
🆕📕 New to docs: Snippets are a way to store, edit and run bits of JavaScript to execute in the context of the currently open document. This allows you to change the page to your needs and try out new functionality. docs.microsoft.com/en-us/mic…
Screenshot of the Microsoft Edge Developer Tools open on docs.microsoft.com showing a basic JavaScript snippet.

ALT Screenshot of the Microsoft Edge Developer Tools open on docs.microsoft.com showing a basic JavaScript snippet.

3
19
Enjoying Edge 86? Be sure to check out new Edge DevTools features for Surface Duo debugging, accessibility, and more! docs.microsoft.com/en-us/mic…
What's New in DevTools, Microsoft Edge 86. Match DevTools keyboard shortcuts to VS Code. Emulate Surface Duo and Samsung Galaxy Fold. Customize CSS grid overlays. Preserve formatting when copying console.table output. Test accessibility with Source Order Viewer. And more.

ALT What's New in DevTools, Microsoft Edge 86. Match DevTools keyboard shortcuts to VS Code. Emulate Surface Duo and Samsung Galaxy Fold. Customize CSS grid overlays. Preserve formatting when copying console.table output. Test accessibility with Source Order Viewer. And more.

1
6
22
Microsoft Edge Driver is now available on Linux! Install Microsoft Edge Dev from aka.ms/edgedev/download on your Linux machine and then download Microsoft Edge Driver from aka.ms/msedgedriver to start automating your new browser.
Screenshot of the Microsoft Edge Driver Downloads page with the Linux offering for Version 88.0.673.0 highlighted

ALT Screenshot of the Microsoft Edge Driver Downloads page with the Linux offering for Version 88.0.673.0 highlighted

2
19
47
Replying to @kylealden

ALT Breakout for Atari 2600
7
🛠 The improved "Microsoft Edge Devtools for Visual Studio Code" extension allows you to debug the DOM and CSS directly in @code using the tools you're used to. If you turn on the Network functionality in the settings you can also inspect network requests. aka.ms/devtools-for-code
1
5
20
CSS grid tooling is now on by default in Edge 87 and later! Enable multiple overlays with customizable colors and tooltips to get the best view on your grid layouts.
3
32
114
Replying to @webmaxru
And that's the old screencast - this version features new options like a headless browser option (no extra window) and also allows you to inspect the network activities directly in @code. Like this:
9
Are you a fan of the browser developer tools but not a fan of switching from editor to browser to use them? We heard you! Today we moved the "Microsoft Edge Developer Tools for VS Code" extension out of preview. Learn more: blogs.windows.com/msedgedev/…

ALT The extension in action. Connect to a new Microsoft Edge instance, edit CSS using the developer tools or directly in Visual Studio Code.

11
118
386
Replying to @etiennejcharles
Hi there, Microsoft Edge is part of the Chromium project, we track issues directly in the official tracker. (bugs.chromium.org/p/chromium…). That way you improve all the products based on Chromium. For issues that only apply to Microsoft Edge, there's the feedback tool in the browser.
Those are general accessibility features and thanks for those. Out of scope for the source order viewer, but good ideas for the accessibility menu. Contrast warning is part of the new inspect.
1
Want better CSS grid overlays? The ability to edit and replay network requests? Help fixing accessibility and cross-browser compatibility issues? We've got you covered and then some with DevTools in Microsoft Edge 85. Learn more at docs.microsoft.com/en-us/mic…
What's New in DevTools, Microsoft Edge 85: 1. See grid line numbers, grid gaps, and extended grid lines in new CSS grid overlays. Edit and replay network requests with Network Console. Get insight on service worker respondWith events. Fix accessibility and compatibility issues with webhint. Move any tool between the top and bottom panels. And more.

ALT What's New in DevTools, Microsoft Edge 85: 1. See grid line numbers, grid gaps, and extended grid lines in new CSS grid overlays. Edit and replay network requests with Network Console. Get insight on service worker respondWith events. Fix accessibility and compatibility issues with webhint. Move any tool between the top and bottom panels. And more.

4
27
107
We're aware of a hang happening in Canary and Dev when you navigate to the Service Worker section in the Application tool. While we work on a fix, you can get around this issue by closing the hung tab and re-opening the tools using the "Right click" > "Inspect" entry point.

ALT The Edge DevTools hang in Canary and Dev when you open the Application pane and navigate to the Service Worker section. To work around it, open a new tab and close the old tab with the hung tools, then use "Right Click" > "Inspect" to open DevTools.

1
3
6
Are you passionate about building a better web? We have openings for a PM Manager and PM who will lead our vision for the Microsoft Edge web platform. Learn more and apply below if you're interested! PM Manager: lnkd.in/gEQQmXF PM: lnkd.in/gEkZ6ZD
18
31
Replying to @zackster
Some kind of shortcut could be possible. Question is what to do with the other options. Could you do us a favour and file a feedback item with your email and screenshots? We can then discuss the matter better as it gets into our bug triage. Twitter isn't good for that. /Chris
1
Replying to @zackster @agektmr
The idea is that with a dropdown you have more options, like simulating slow mobile connections. Don't you ever try those?
1
We have a lot of service worker improvements coming up. First up: service worker request timelines in the Network pane. You'll get a better breakdown in the Timing tab. Check out our bug here: aka.ms/SWNetworkTimeline What else can we do to make #pwa development easier?
2
13
39
Take a look at how @webhintio integrates with @code and the Edge DevTools to let you know when your web app has features that aren't accessible or supported in all browsers. The full #OpenJSWorld talk is available at piped.video/watch?v=5qNxiBrO…
11
38
New feature in @EdgeDevTools (and @ChromeDevTools): 🔃 Move tabs in DevTools between the top and bottom panes so you can see any two tools at once! Turn on "Enable support to move tabs between panels" in DevTools Settings > Experiments. Available now in Canary and Dev builds.
3
33
138
Are your animations showing up when users opted out of seeing them? You can test your implementation with @MSEdgeDev developer tools without having to change your system settings. We just added documentation how to: docs.microsoft.com/en-gb/mic… #NewDevToolsDocs
1
4
20
Replying to @ismael_novo
Thanks for the feedback! We'll pass it along to the right folks. We also recommend sending future browser feature requests through the feedback icon at the top right of the browser window. That way, you can track progress and replies directly. Cheers! /Rachel
1
Replying to @tobiasalcaraz_
Can you tell us more? This might be an issue for certain URLs, but should not happen. Could be a detection from the site itself? If you give us a reproducible (even flaky) URL via the feedback tool, that would help us a lot finding the solution.
High-contrast mode, VS Code keyboard shortcuts, and more! Check out the new features and fixes for DevTools in Microsoft Edge 84: docs.microsoft.com/en-us/mic…
What's New in DevTools (Microsoft Edge 84): 1. Use DevTools in Windows high-contrast mode. 2. Match keyboard shortcuts in the DevTools to VS Code. 3. Remotely debug Surface Duo emulators. 4. Resize the DevTools drawer more easily. 5. Fix site issues with the new Issues tool. 6. ...and more.

ALT What's New in DevTools (Microsoft Edge 84): 1. Use DevTools in Windows high-contrast mode. 2. Match keyboard shortcuts in the DevTools to VS Code. 3. Remotely debug Surface Duo emulators. 4. Resize the DevTools drawer more easily. 5. Fix site issues with the new Issues tool. 6. ...and more.
16
55
For reference, here is a screenshot showing Options 1, 2, and 3.
Screenshot showing menu locations in Edge DevTools

ALT Screenshot showing menu locations in Edge DevTools
3
Replying to @AndresSepar
We can surely consider it. I assume you use the event handler pane in the lower part of the devtools? The great thing there is that you can filter by element, ancestor and framework events. Event handling has become a lot more complex. /Chris
Developer Tools in current Microsoft Edge browser open on the elements pane and showing the event listeners in a detailed pane below it.

ALT Developer Tools in current Microsoft Edge browser open on the elements pane and showing the event listeners in a detailed pane below it.

1
3
Load more