Microsoft Edge Developer Tools
For more on the latest features, check out DevTools in the latest update of Windows 10 (EdgeHTML 17).
The Microsoft Edge DevTools include:
- An Elements panel to edit HTML and CSS, inspect accessibility properties, view event listeners, and set DOM mutation breakpoints
- A Debugger to step through code, set watches and breakpoints, live edit your code, and inspect your web storage and cookie caches
- A Network panel to monitor and inspect requests and responses from the network and browser cache
- A Performance panel to profile the time and system resources required by your site
- A Memory panel to measure your use of memory resources and compare heap snapshots at different states of code execution
- An Emulation panel to test your site with different browser profiles, screen resolutions, and GPS location coordinates
Please keep sending your feedback and feature requests!
Microsoft Store app
The Microsoft Edge DevTools are now available as a standalone Windows 10 app from the Microsoft Store, in addition to the in-browser (
F12) tooling experience. 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.
To debug a page locally, simply launch the Microsoft Edge DevTools app. The Local panel of the chooser will display all of the active EdgeHTML content processes, including open Edge browser tabs, running PWAs (WWAHost.exe processes), and webview controls. Click on your desired target to attach and open a new tab instance of the DevTools.
The Microsoft Edge DevTools app introduces basic support for debugging pages on a remote machine via our newly released DevTools Protocol. With this release comes remote access to core funtionality in the Debugger panel, minus cache inspection (for Web storage, Service worker, Cache API, and IndexedDB). Remote debugging is limited to Microsoft Edge running desktop hosts, with support for other EdgeHTML hosts and Windows 10 devices coming in future releases.
Please send us your feedback so we can continue improving the Microsoft Edge DevTools for you! Simply open the tools (
F12) and click the Send feedback button.
You can also add and upvote tooling requests to our UserVoice forum and become a Windows Insider to preview the latest features coming to the DevTools. Use the Windows Feedback Hub app to post, upvote, track and get support for general Windows suggestions and problems.
These shortcuts control the main DevTools window and/or work across all tools.
|Show/Hide DevTools (opens to last viewed panel)||F12, Ctrl+Shift+I|
|Toggle docking (Undock/Bottom/Right)||Ctrl+Shift+D|
|Show non-editable HTML source code in Debugger||Ctrl+U|
|Show/hide Console at the bottom of any other tool||Ctrl+`|
|Switch to Elements (DOM Explorer)||Ctrl+1|
|Switch to Console||Ctrl+2|
|Switch to Debugger||Ctrl+3|
|Switch to Network||Ctrl+4|
|Switch to Performance||Ctrl+5|
|Switch to Memory||Ctrl+6|
|Switch to Emulation||Ctrl+7|
|Previous tool (from history)||Ctrl+Shift+[|
|Next tool (from history)||Ctrl+Shift+]|
|Next match in Search box||F3|
|Previous match in Search box||Shift+F3|
|Find in search box||Ctrl+F|
|Give focus to console at the bottom||Alt+Shift+I|
|Dock/undock tools (toggle docking)||Ctrl+P|
|Launch DevTools to Console||Ctrl+Shift+J|
|Refresh the page. Note: if you're debugging and paused at a breakpoint, this resumes execution first.||Ctrl+Shift+F5 or Ctrl+R|