About the UI of DevTools

The UI of the DevTools is separated into two main sections. The top section contains the main toolbar tabs and a bottom toggle window called drawer contains the drawer toolbars tab. Every tool in DevTools has its own tab so, for example, you can call the Welcome tool in DevTools a Welcome Tab.

1. Main Section:

• Inspect an element: This option is used to select a particular element in the webpage to be displayed in the HTML code in the Elements Tab. The option is very handy as it saves time by searching the whole HTML code for a particular element.

• Device Emulation: This option is basically used to check the webpage for responsiveness and other device-related conditions. On clicking the option it displays the webpage with various device-related options such as device width and height, rotation, zoom level, network throttling, etc.

• Close Tab: This cross symbol appears in the selected tab and is used to close the selected tab. The Elements, Console, and Sources tab are the default DevTools tab and cannot be closed so the cross symbol does not appear when these tabs are selected.

• Main Toolbar: All the tabs for respective tools in the main window are arranged together in the series and newly added tools become part of this toolbar.

• More tabs: The no. of tools added as a tab in the toolbar may exceed the required width of the toolbar so, these tabs are separated under the More tabs option. On clicking this double greater-than button it will display the list of tabs that overflowed from the toolbar.

• More tools: All the tools that are not part of the toolbar can be selected from the More tools option. On clicking this add button you will get the list of all the tools that the DevTools provide but are not part of the toolbar.

• Issues and Console Messages: The DevTools also provide the no. of console errors, warnings, and issues on the webpage. On clicking the console errors or warnings count you are brought to the console tab and on clicking the issues count you are brought to the issues tab.

• Send Feedback: This option opens a window asking for feedback about the DevTools. The window asks for your email address, the URL of the page where the DevTools is being used, an input field describing the problem or feedback, and many other things.

• Settings: This option takes us to the setting window which contains various options to customize the DevTools. You can enable/disable features and add your own custom data in various tools. All the Settings are in categories under different panes such as Preferences, Workspace, Shortcuts, etc.

• Customize DevTools: This button provides a menu containing various options to change the dock position of the DevTools and also various commonly used options such as run command, open file, device emulator, etc.

• Close DevTools: This cross button present in the top-right of the main section is used to close the whole DevTools sub-window.

2. Drawer Section:

• Drawer Toolbar: All tools provided by DevTools can also be present in the drawer section as a tab in the drawer toolbar. Except for console tab, you can’t have the tool tab present both in the main toolbar and drawer toolbar.

• More tools: This add button provides the list of all the tools provided by the DevTools but are not part of the drawer toolbar.

• Close drawer: This cross button is used to close the drawer in case you don’t need it. To bring back the drawer just press the ESC button on your keyboard or in the Customize DevTools menu select “Show console drawer”.

The Edge browser provides a wide range of tools that can be used to debug or inspect a webpage, these set of tools can be used from a sub-window called Development tools or DevTools. You can check for responsiveness, performance, and network request or edit styles in the browser itself, you can also check the JS code and debug with various debugging tools provided in the DevTools window.