Microsoft edge devtools preview

Skip to main content This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. Article03/04/2025 In this article -->These are the latest features in the Stable release of Microsoft Edge DevTools.Use the DevTools in Windows high contrast modeMicrosoft Edge DevTools is now displayed in high-contrast mode when Windows is in high-contrast mode.Follow the instructions to turn on high-contrast mode in Windows. To open DevTools in Microsoft Edge, select F12 or Ctrl+Shift+I. DevTools is displayed in high-contrast mode.Note: DevTools currently supports high-contrast mode on Windows, but not on macOS.Chromium issue #1048378See also:Check for contrast issues with dark theme and light themeMatch keyboard shortcuts in the DevTools to Visual Studio CodeFrom your feedback and the Chromium public issue tracker, the Microsoft Edge DevTools team learned that you wanted to be able to customize keyboard shortcuts in DevTools. In Microsoft Edge 84, you can now match keyboard shortcuts in DevTools to Visual Studio Code, which is just one of the features the team is working on for shortcut customization.To try the experiment:In DevTools, open Settings by pressing ? or clicking the Settings () icon in DevTools.In the Experiments section, select the checkbox Enable custom keyboard shortcuts settings tab (requires reload).Reload DevTools.Open Settings again, and select the Shortcuts section.Click the Match shortcuts from preset dropdown list, select DevTools (Default), and then select Visual Studio Code.The keyboard shortcuts in DevTools now match the shortcuts for equivalent actions in Visual Studio Code.For example, the keyboard shortcut for pausing or continuing running a script in Visual Studio Code is F5. With the DevTools (Default) preset, that same shortcut in DevTools is F8, but with the Visual Studio Code preset, that shortcut is now also F5.The feature is currently available in Microsoft Edge 84 as an experiment, so please share your feedback with the team!Chromium issue #174309See also:Customize keyboard shortcutsRemote debug Surface Duo emulatorsYou can now remotely debug your web content that's running in the Surface Duo emulator using the full power of Microsoft Edge DevTools.With the Surface Duo emulator, you can test how your web

Skip to main content This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. Article04/16/2024 In this article -->Use the Demos repo to learn how to use Microsoft Edge to develop webpages and web apps. There are various ways to view, download, and modify these demo webpages, including:DevTools in Microsoft Edge.Visual Studio Code, with optional DevTools.Visual Studio, with optional DevTools.To view the source code for a rendered demo webpage in DevTools in Microsoft Edge:In a Readme page, click the Demo link. The live page opens in Microsoft Edge.Right-click the demo webpage, and then select Inspect to open DevTools.The following demos demonstrate DevTools features.Demo nameDescriptionRepo directoryLive demo pageCSS mirroring sourcemapsUsed for Update .css files from within the Styles tab (CSS mirror editing) for the DevTools extension for Visual Studio Code./css-mirroring-sourcemaps-demo/n/aTODO appSimple To Do app with vanilla JavaScript. Used for screenshots in the Microsoft Edge DevTools documentation, and for Opening DevTools and the DevTools browser for the DevTools extension for Visual Studio Code./demo-to-do/My tasksDetached elementsChat-like demo. Used for Debug DOM memory leaks by using the Detached Elements tool./detached-elements/Simulate traffic3D ViewUsed for Navigate webpage layers, z-index, and DOM using the 3D View tool./devtools-3d/Microsoft Edge DevTools 3D View tool demoAccessibility testingUsed for Accessibility-testing features./devtools-a11y-testing/Animal shelterDevTools issue: animating a CSS property that requires layoutIllustrates the Issues and Elements tools warning when CSS properties that require layout are animated./devtools-animated-property-issue/Animated CSS property demoConsole panel demo pagesUsed for Console overview, Log messages in the Console tool, and Fix JavaScript errors that are reported in the Console./devtools-console/DevTools Console panel demo pagesDOM interaction from the Console demo pageUsed for Interact with the DOM using the Console./devtools-console-dom-interactions/DevTools Console tool DOM interactions demoContrast bug fixUsed for Improving contrast in Microsoft Edge DevTools: A bugfix case study./devtools-contrast-bugfix/Testing all badges in DevTools for contrast issuesCSS ExamplesUsed for Get started viewing and changing CSS./devtools-css-get-started/CSS ExamplesDOM ExamplesUsed for Get started viewing and changing the DOM./devtools-dom-get-started/DOM ExamplesExplain Console errors and warnings in Copilot in EdgeGenerates errors in the Console that can then be explained by using Copilot in Edge./devtools-explain-error/Explaining console errors demoInspect toolUsed for Analyze pages using the Inspect tool./devtools-inspect/Inspect DemoDebugging JavaScript that adds two numbersUsed for Get started debugging JavaScript./devtools-js-get-started/Demo: Debugging JavaScript with Microsoft Edge DevToolsMemory heap snapshotUsed for Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)./devtools-memory-heap-snapshot/n/aPerformance Activity TabsUsed for View activities in a table, about the Performance tool's Bottom-Up, Call Tree, and Event Log tabs./devtools-performance-activitytabs/Activity Tabs DemoSluggish AnimationUsed for Introduction to the Performance tool./devtools-performance-get-started/Sluggish AnimationpostMessage Trace EventsTests postMessage trace events in the Performance tool. Used for View messages between windows, iframes, and dedicated workers in Performance features reference./devtools-postmessage-perf-timeline/postMessage Trace Events demoCSS :target pseudo-classUsed for Support forcing the :target CSS state./devtools-target-pseudo/CSS

Content renders on a new class of foldable and dual-screen devices. The emulator runs the Android operating system and provides the Microsoft Edge Android app. Load your web content in the Microsoft Edge app and debug it with DevTools:The edge://inspect page in a desktop instance of Microsoft Edge shows the SurfaceDuoEmulator with a list of the open tabs or PWAs that are running on the Surface Duo emulator:Click inspect for the tab or PWA that you want to debug, to open DevTools. Follow the step-by-step guide to remotely debug your web content on the Surface Duo emulator: Remotely debug Surface Duo emulators.Resize the DevTools Quick View panel more easilyIn Microsoft Edge 83 or earlier, you resized the Drawer (now Quick View panel) by hovering inside the Drawer's toolbar. The Drawer behaved differently than the other resize controls for panes in DevTools where you hover on the border of the pane to resize it. The following image shows how resizing the Drawer worked in Microsoft Edge version 83 or earlier:Starting with Microsoft Edge 84, you can resize the Drawer by hovering over the border. This change aligns the behavior for resizing the Drawer with other panes in DevTools. The following image shows how resizing the Drawer works in Microsoft Edge 84 or later:Chromium issue #1076112Screencasting navigation buttons display focusWhen remote debugging an Android device, a Windows 10 or later device, or a Surface Duo emulator, you can toggle screencasting with the icon in the top-left corner of DevTools. With screencasting enabled, you can navigate the tab in Microsoft Edge on the remote device from the DevTools window.In Microsoft Edge 84, these navigation buttons are now also keyboard-accessible. For example, pressing Shift+Tab from the screencasted URL bar puts focus on the Refresh button:Chromium issue #1081486Network panel Details pane is now accessibleIn Microsoft Edge 84, the Details pane in the Network tool now takes focus when you open it for a resource in the Network Log. This change allows screen readers to read out and interact with the content of the Details pane.Chromium issue #963183Announcements from the Chromium projectThe following sections announce additional