Move panels to re-arrange them
Moving panels around the user interface can be very useful to make DevTools more unique to you and adapted to your needs.
There are 2 ways that you can re-arrange panels in DevTools today: dragging them horizontally in the toolbar, to re-order them, and moving them between the top toolbar and the bottom (drawer) toolbar
To move tabs between the top and bottom areas (Edge only)
- Right-click on any of the tabs.
- Select Move to Bottom or Move to Top depending on where the tab is.
This only works in Edge at the moment is makes it super easy to see any 2 tools at once (more information about Edge personalization features).
To re-order panels by dragging (Chrome, Edge, Firefox, Safari)
- Click and hold any of the tabs in the toolbar.
- Move that tag horizontally, left or right, until the desired location.
- Release the tab. The new order will be persisted so every time you open DevTools, it will be there.
If you use some tools more than others, this can be used to group them at the start of the toolbar for example.