Microsoft Edge DevTools

@EdgeDevTools

Official news and updates from the Developer Tools team.

Redmond, WA
docs.microsoft.com/en-us/microsof…
Joined December 2013
134 Photos and videos Photos and videos

Tweets

You blocked @EdgeDevTools

Are you sure you want to view these Tweets? Viewing Tweets won't unblock @EdgeDevTools

  1. Mar 1

    We'd love to hear your feedback here in the comments or on GitHub, where we describe why we're building these features as well as our roadmap for upcoming improvements.

    1 reply 2 retweets 6 likes
    Show this thread
    Show this thread
    Undo
  2. Mar 1

    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.
    1 reply 1 retweet 9 likes
    Show this thread
    Show this thread
    Undo
  3. Mar 1

    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.
    1 reply 1 retweet 9 likes
    Show this thread
    Show this thread
    Undo
  4. Mar 1

    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 reply 22 retweets 67 likes
    Show this thread
    Show this thread
    Undo
  5. Retweeted
    Feb 24
    Replying to and

    Agree with (adore the Twitter handle btw) for “tool within an ide.” But have you seen the network console? Cc - I just blogged about it in our “month’o’apis” and showed it on the community standup with

    2 retweets 9 likes
    Undo
  6. Feb 23

    💡 console.log(`New blog post!`); Read "Six time-saving tips for using the DevTools Console" from and to learn how to get the most from the console when debugging for the web:

    11 retweets 25 likes
    Undo
  7. Feb 22

    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

    Screenshot of Welcome tab in Edge DevTools
    3 retweets 15 likes
    Undo
  8. Feb 22

    To learn more about the technical details and our collaboration with , go to .

    5 likes
    Show this thread
    Show this thread
    Undo
  9. Feb 22

    Calling all developers working with PWAs and service workers! Check out our service worker debugging improvements in the Network, Application, and Sources panes:

    1 reply 16 retweets 40 likes
    Show this thread
    Show this thread
    Undo
  10. Feb 12

    Edge Canary users: Use DevTools to test how your website will look on the Surface Duo and Samsung Galaxy Fold. Learn more at .

    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 replies 4 retweets 7 likes
    Undo
  11. Feb 11

    Edge Canary users: Give our new visual Font Editor in DevTools a try! Learn more at .

    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.
    2 retweets 6 likes
    Undo
  12. Feb 10

    🚨 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.

    6 retweets 13 likes
    Undo
  13. Retweeted
    Jan 26

    🆒How to turn a full web page into an image: Ctrl-shift-S for screencapture in new 📃the whole page... 📄with scrolling... 🪡 stitched! Access is from the ellipsis menu of the browser.

    Photos of how to screencapture a full webpage as an image in Edge.
    and
    4 retweets 9 likes
    Undo
  14. Feb 2

    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

    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!
    1 reply 7 retweets 24 likes
    Undo
  15. Feb 2

    🍿 Last week at Chris Heilmann of the team gave a talk about the Edge DevTools extension for . Here’s a pre-recorded version, in case you missed it.

    1 reply 6 retweets 47 likes
    Undo
  16. Jan 29

    🛠 How to make the Microsoft Edge Devtools extension for auto-refresh when there's a code change. TL;DR: Use the reload NPM package on your project folder. Get the extension at

    3 retweets 8 likes
    Undo
  17. Jan 23

    We love this video from showing how a web browser works, complete with a guest appearance by the Edge DevTools! 😍

    What happens when you type a URL in the web browser and press Enter? via
    1 reply 4 retweets 42 likes
    Undo
  18. Jan 12

    🚨 Update: The Microsoft Edge DevTools extension for version 1.1.2: 🆕 DevTools Version 85 📦 Microsoft Edge Debugger as a dependency 💅🏼 Theme settings! 🗑 Close instance buttons! 💻 Code and changelog: 🍾 Get it now:

    Theme chooser in the Microsoft Edge Devtools extension for VS Code.
    1 reply 7 retweets 25 likes
    Undo
  19. Retweeted
    19 Nov 2020

    Feeling so proud of the work we, Google and Microsoft, are doing together on Flex and Grid as some of the new Flex tools start to land in and ! - Easy to recognize alignment icons, - flex badges, - new overlays, - and more to come!

    4 screenshots of parts of the flex tooling in edge and chrome devtools showing icons in the Styles tab, badges in the Elements panel, and flex overlay in the page.
    6 replies 26 retweets 147 likes
    Undo
  20. Retweeted
    20 Dec 2020

    The new Font Editor Experiment in DevTools is great. Tweak typography dynamically with sliders (font size, line-height, spacing & weight) Thx for bringing it to Chromium &

    New Font Editor in Chrome & Chromium DevTools (Experiment)
    The Font Editor is a new editor in the Elements > Styles pane for font properties. It provides UI to manipulate typography with a series of input types for font size, line-height, spacing and more.
    11 replies 211 retweets 897 likes
    Undo

@EdgeDevTools hasn't Tweeted yet.

Loading seems to be taking a while.

Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.

    You may also like

    ·