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
143 Photos and videos
Filter
Exclude
Time range
-
Minimum likes
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
Replying to @seaotta
Yes, the ability to move any DevTools tab to the drawer is available across all OSes running Edge 87 or later. Glad you're enjoying the new DevTools feature! /Rachel
2
1
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
Starting in 10 minutes! Learn about the new CSS flexbox and grid debugging features in Chromium DevTools from Edge DevTools engineer @patrickbrosset! #blinkon
Patrick @patrickbrosset@mas.to@patrickbrosset
7 May 2021
I'll be giving a short talk about the flexbox and grid tooling in Chromium at BlinkOn 14. Join me there to learn about the tools, and about why and how we created them. Find the full schedule here: docs.google.com/document/d/e…
2
4
7
🛠 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
Replying to @hajekj @MSEdgeDev
Great you like it, we’re also considering bringing this is experience to @code as an extension. Feel free to file any issues you find on GitHub. github.com/microsoft/edge-de… /Chris
3
💡 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
Load more