Customizing the DevTools

There are many things in DevTools that can be customized according to your needs. Some of them are:

1. Reset DevTools:

You can restore the tabs and settings of DevTools back to default using the button called “Restore defaults and refresh” preset in the Preference pane in the DevTools settings.

2. Change the Theme of DevTools:

You can change the theme in the DevTools setting or by using Run Command.

• Using Run Command: To change the theme using Run Command, press the shortcut key “Ctrl+Shift+P” or select Run Command from Customize DevTools and then type theme. Select any theme you want from the list of options that appear.

• Using DevTools Setting: To change the theme using DevTools Setting, click the setting button on the top-right part of the DevTools. Under the Preferences pane select the ones you want from the Theme drop-down list. The list is categorized into 3 sections which are the System preference, Light themes, and Dark themes.

3. Change the Language of DevTools:

You can change the language of DevTools in the DevTools Setting under the Preferences Pane. In Preferences Pane select the language you want from the Language drop-down list.

4. Change the Dock Position of DevTools:

The DevTools dock position can be changed to the left, bottom, or right part of the Browser. You can also have the DevTools in a Separate window.

5. Toggling Tooltips in DevTools:

To get to know about the tools and the panes in each tab of the tools in DevTools you can turn on Tooltips. The Tooltips can be toggle from the Help option present in the Customize DevTools button i.e. the three dots present in the top-right part of DevTools.

6. Zoom in and out in DevTools:

You can zoom the DevTools by holding “Ctrl” and then pressing “+” to zoom in, “-” to zoom out and “0” to reset zoom. You must first focus on the DevTools to do that just click anywhere in the DevTools. The zoom will only affect the DevTools and not the webpage.

7. Arrange tabs in DevTools:

You can move tabs between main toolbar and drawer toolbar by just right clicking the tab and select Move to top or Move to bottom respectively. You can also change the arrangement of the tabs in the main or drawer toolbar by dragging the tab to the required position.

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.