Understand the DevTools user interface

Understand how the Microsoft Edge DevTools UI is organized. If you are confused about what tools are available, and what the main parts of the DevTools interface do, this video will help get more comfortable.

In this video, we go over the UI structure, with its main toolbar and panel and its drawer area. We also go over how to find, open, and close tools, restore the default settings, and go over the list of available tools.

Learn more in our docs: https://aka.ms/devtools-docs
Join the community: https://github.com/MicrosoftEdge/DevT...

Video Chapters
00:00 Introduction
00:19 The main UI structure
00:41 The Inspect tool and Device Emulation mode
00:58 Tools in the main toolbar
01:11 The ""More tabs"" button
01:32 The ""More tools"" button to see all 30+ tools
01:54 Closing tools
02:16 Reordering the main toolbar
02:31 The Drawer
03:01 The Drawer toolbar
03:15 Moving tools between the main and drawer areas
03:35 Restoring default settings
03:45 The list of tools
05:19 Links and conclusion

• #science_technology
• #microsoft_edge
• #developer_tools
• #devtools
• #developer