DevTools in the latest Windows 10 update (EdgeHTML 17)
This release of the DevTools ships in two ways: as the traditional in-browser (
F12) tools for Edge, and previewing as a standalone Windows 10 app from the Microsoft Store!
The tools have been updated with a number of major features, including basic support for remote debugging (via our new DevTools Protocol), PWA debugging features, IndexedDB cache management, vertical docking and more! We also continued the overall refactoring effort started last release as part of ongoing investments in performance and reliability.
Microsoft Edge DevTools app preview
The Microsoft Edge DevTools are now available for preview as a standalone Windows 10 app from the Microsoft Store. With the store version comes a chooser panel for attaching to open local and remote page targets and a tabbed layout for easy switching between DevTools instances. Also exclusive to the DevTools app is the ability to debug web content in apps (such as add-ins for Office, Cortana, EdgeHTML webview, and Windows-installed PWAs).
The Edge DevTools are also still available (
F12) from within the browser (without the chooser panel).
Decoupling the DevTools from Edge provides these UX and architectural advantages:
- The DevTools run in a separate app container sandbox from Microsoft Edge, providing better reliability for both.
- The app provides easy switching between active DevTools instance tabs (rather than having to switch between open Edge tabs)
- We're able to instrument the EdgeHTML browser engine and open it to the larger devtools ecosystem with cross-browser APIs.
- We can ship DevTools updates independently from the Windows (and EdgeHTML) release cycle.
Check out the DevTools guide for more on local and remote debugging using the DevTools app.
Developer tools can use the Microsoft Edge DevTools Protocol to inspect and debug the Microsoft Edge browser. It provides a set of methods and events that are organized into different Domains of EdgeHTML engine instrumentation.
Tooling clients can call these methods and monitor these events through JSON web socket messages exchanged with the DevTools Server hosted by Edge or the Windows Device Portal.
Microsoft Edge DevTools uses this protocol to enable remote debugging of a host machine running Microsoft Edge from the standalone DevTools client available from the Microsoft Store. Currently this preview support is limited to JS debugging of another Edge on another desktop device or VM. Over time, we’ll add support for the full set of DevTools against any EdgeHTML instance on any Windows 10 device.
New to the Debugger this release is an IndexedDB Manager with support for inspecting and refreshing your object stores and deleting individual key-value entries. Expect even more functionality in future releases.
Additionally, the Network panel toolbar has a new button, Bypass Service Worker for all network requests, to toggle on/off your registered service workers as network proxies:
Docking to the right in Microsoft Edge
You can now dock the DevTools to the right of the page you're debugging from within Microsoft Edge, in addition to docking at the bottom and undocking the DevTools from the browser window. Use
Ctrl+Shift+D to cycle between the Dock Bottom, Dock Right, and Undock positions, or the icons in the top-right corner of the DevTools: