| title | Simplify DevTools using Focus Mode |
|---|---|
| description | Learn to use the new Focus Mode experimental user interface to reduce the complexity of DevTools, make it more compact, and easier to open and close tools. |
| author | MSEdgeTeam |
| ms.author | msedgedevrel |
| ms.topic | conceptual |
| ms.prod | microsoft-edge |
| ms.date | 04/01/2022 |
Focus Mode is a new user interface for DevTools. Focus Mode is designed to simplify and streamline the DevTools UI, without compromising its feature set.
Focus Mode replaces the main row of tabs with an Activity Bar, which is a compact toolbar with distinctive icons. The Activity Bar makes it possible to pin, rearrange, and open your favorite tools, for quick access. The Activity Bar also provides access to user settings, help, and other features.
Focus Mode also provides a Quick View list, to open a second tool alongside the tool that's already selected in the Activity Bar.
The Microsoft Edge team is enabling Focus Mode to a subset of users to collect early feedback. Some users will have Focus Mode enabled by default, while others need to enable it first.
To check if you have Focus Mode enabled already, or to enable or disable it:
-
Press
F1to open Settings. -
Click Experiments and scroll down to the Focus Mode checkbox.
If the Focus Mode checkbox is selected, Focus Mode is already enabled. Select or clear the checkbox to enable or disable Focus Mode:
-
Close the Settings page. If you changed the Focus Mode experiment state, click the Reload DevTools button for the change to take effect.
Here are the main differences between the DevTools default user interface and Focus Mode.
The Activity Bar is the most visible difference from the default user interface. Use it to open tools, help features, and settings.
By default, the position of the Activity Bar adapts to the location of the DevTools window. If DevTools is undocked or docked to the bottom of the browser, the Activity Bar will be horizontal. If DevTools is docked to the side of the browser, the Activity Bar will be vertical, and tool names will not be visible. This enables quicker tool access when screen width is limited.
The Activity Bar top-aligned in Focus Mode, with DevTools docked:
The Activity Bar top-aligned in Focus Mode, with DevTools popped out in a separate window:
In the default DevTools user interface, a counter appears in the main toolbar showing the number of messages such as Issues recommendations and Console warnings. The counter could grow large when many messages ae generated, taking up valuable space in DevTools.
In Focus Mode, this counter has been removed. Instead, small indicators overlay Issues and Console to display whether messages have been reported by the respective tools:
The Quick View list contains all tools that can be displayed alongside the one already selected from the Activity Bar.
Quick View replaces the drawer toolbar from the default user interface:
Several customization features and the DevTools settings are now grouped together under a single menu available from the Customize and control DevTools (...) button in the Activity Bar. These features and settings appear in multiple locations in the default user interface.
- Dock location lets you change the placement of DevTools in the browser window.
- Activity Bar location lets you change the placement of the Activity Bar within DevTools.
- Themes lets you change the color theme.
- Settings provides access to the DevTools settings.
- Keyboard shortcuts lets you review and change keyboard shortcuts.
The Help menu contains links to the DevTools documentation and release notes and a button to send feedback to the team:
These links and buttons were previously nested under Customize and control DevTools > Help in the default user interface.
By default, the Activity Bar contains the following modes and tools:
-
Inspect mode (
) toggle button. -
Device Emulation mode (
) button. -
Welcome tool (
). -
Elements tool (
). -
Console tool (
). -
Sources tool (
). -
Network tool (
). -
Issues tool (
). -
Performance tool (
). -
Memory tool (
). -
Application tool (
).
You can choose which tools appear in the Activity Bar by pinning or unpinning tools. This allows you to customize DevTools to your preferred workflow.
Click More tools (+) to list all the available tools. Selecting a tool will pin it to the Activity Bar. It will be shown by default every time DevTools is opened.
If there isn't enough space in the Activity Bar to display all pinned tools, some tools may overflow into the More tools menu:
To unpin a tool from the Activity Bar, right-click the tool and select Remove from activity bar:
Currently, the following tools cannot be unpinned from the Activity Bar:
- Elements tool
- Console tool
- Sources tool
Use the Quick View list to open a second tool next to the one already selected from the Activity Bar.
-
Select a tool from the Activity Bar.
-
Click the Quick View list and select a different tool from the list.
The following screenshot shows the Network tool and the Console tool side-by-side:
You can hide or expand Quick View by clicking Collapse Quick View / Expand Quick View or pressing the Escape key. (
).
The Activity Bar can be oriented vertically or horizontally to maximize usable screen space in a variety of DevTools window locations.
To change the location of the Activity Bar click Customize and control DevTools, then Activity bar location, and then select one of the locations:
-
Adapt to dock location (default): The Activity Bar will be in a horizontal or vertical orientation depending on where DevTools is docked.
-
If DevTools is docked to the left or right side of the browser window, the Activity Bar will be vertical.
-
If DevTools is docked to the bottom side of the browser window, or undocked in its own window, the Activity Bar will be horizontal.
-
-
Top: The Activity Bar will always be horizontal.
-
Left side: The Activity Bar will always be vertical.
When the Activity Bar is horizontal, tool names appear next to tool icons if there is enough space to display them.
When DevTools is undocked in its own window, the horizontal Activity Bar shows some tabs with tool icons and names, and some tabs with icons only:
- DevTools: Focus Mode UI is the initial explainer for this experimental feature, in the Microsoft Edge DevTools repo.