@EdgeDevTools

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

 Redmond, WA
docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium
Joined December 2013
  • Tweets804
  • Following124
  • Followers8.5K
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
1
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
1
2
Replying to @EdgeDevTools @patrickbrosset
The #BlinkOn session "CSS Flexbox and Grid tooling in Chromium" is now available to watch on demand! youtube.com/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
1
137
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
2
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
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
5
61
Load more